Sujet Précédent Sujet Suivant

Formulaire d'inscription ne fonctionne pas avec un fondanimé

Fermé
Anissa - 20 déc. 2021 à 17:29
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 24 déc. 2021 à 13:03
Bonjour, j'aurais besoin d'aide car je suis entrain de faire une page web mais j'ai un problème concernant le formulaire d'inscription. J'ai voulu insère derrière mon formulaire un fon animé en css les 2 marche très bien sauf que mes input ne fonctionne plus.

Voila mon code html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inscription</title>
<link rel="stylesheet" href="css/autre new.css">
</head>
<body>
<div class="area" >
<center>
<div class="container">
<form >
<p>Inscription</p>
<input type="email" placeholder="Email"><br>
<input type="password" placeholder="Mot de passe"><br>
<input type="button" value="Connexion"><br>
<a href="#">Mot de passe oublié</a>
</form>

<div class="drop drop-1"></div>
<div class="drop drop-2"></div>
<div class="drop drop-3"></div>
<div class="drop drop-4"></div>
<div class="drop drop-5"></div>
<div class="drop drop-6"></div>
<div class="drop drop-7"></div>
</div>
</center>
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</div >
</body>


Et mon CSS
/*debut fond animer*/

@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
  • {

margin: 0px;
padding: 0px;
}
.context {
width: 100%;
position: absolute;
top:50vh;

}

.context h1{
text-align: center;
color: rgb(106, 17, 248);
font-size: 50px;
}


.area{
background: #6d03f7;
background: -webkit-linear-gradient(to left, #010214, #00010a);
width: 100%;
height:100vh;


}

.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(6, 255, 234, 0.61);
animation: animate 25s linear infinite;
bottom: -150px;

}

.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}


.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}

.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}

.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}

.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}

.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}

.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}

.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}

.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}

.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}



@keyframes animate {

0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}

100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}

}
/*fin fond animer*/

body {
height:100vh;
font-family: arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
}


.container {
margin-top: 30px;
position: relative;
}
form {
background: rgba(245, 236, 238, 0.336);
padding: 4rem;
width: 200px;
height: 390px;
border-radius: 20px;
border-left: 0px solid rgba(255, 255, 255, .3);
border-top: 1px solid rgba(255, 255, 255, .3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-moz-backdrop-filter: blur(10px);
box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2);
text-align: center;
}
p {
color: white;
font-weight: 500;
opacity: .7;
font-size: 1.4rem;
margin-bottom: 60px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}

a {
text-decoration: none;
color: #ddd;
font-size: 12px;
}

a:hover {
text-shadow: 2px 2px 6px #00000040;
}

a:active {
text-shadow: none;
}

input {
background: transparent;
border: none;
border-left: 1px solid rgba(255, 255, 255, .3);
border-top: 1px solid rgba(255, 255, 255, .3);
padding: 1rem;
width: 200px;
border-radius: 50px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
-moz-backdrop-filter: blur(5px);
box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
color: white;
font-weight: 500;
text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
transition: all .3s;
margin-bottom: 2em;
}
input:hover,
input[type="email"]:focus,
input[type="password"]:focus{
background: rgba(255,255,255,0.1);
box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2);
}

input[type="button"] {
margin-top: 10px;
width: 150px;
font-size: 1rem;
cursor: pointer;
}

::placeholder {
color: #fff;
}
.drop {
background: rgba(204, 226, 0, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 100px;
border-left: 1px solid rgba(255, 255, 255, .3);
border-top: 1px solid rgba(255, 255, 255, .3);
box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.2);
position: absolute;
transition: all 0.2s ease;
}
.drop-1 {
height: 80px; width: 80px;
top: 20px; left: 40px;
z-index: -1;
}
.drop-2 {
height: 80px; width: 80px;
bottom: -20px; right: 480px;
}

.drop-3 {
height: 100px; width:100px;
bottom: 450px; right: 450px;
}
.drop-4 {
height: 130px; width:130px;
bottom: 300px; right: 800px;
}
.drop-5 {
height: 110px; width:110px;
bottom: 35px; right: 800px;
}
.drop-6{
height: 80px; width:80px;
bottom: -10px; right: 790px;
}
.drop-7{
height: 110px; width:110px;
bottom: 100px; right: 450px;
z-index: -1;
}

Je sais d'ou vient le probleme mais je ne sais pas comment le resoudre .
Il vient de cette parti du code:
.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
quand je l'enlevé mon input marche mais la page est du coup defigurer.
Merci d'avance pour vos reponses.

</html>
Configuration: Windows / Chrome 96.0.4664.110
A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
24 déc. 2021 à 13:03
Bonjour,

Le problème vient du fait que l'animation affichée dans le <ul class="circles"> est au premier plan, c-a-d au dessus du formulaire, l'utilisateur ne peut donc effectivement plus utiliser le formulaire.

Une première solution, sans changer le code css, serait de déplacer la balise html <ul class="circles"> avant le formulaire : https://jsfiddle.net/7ptmvb19/

Une autre solution, sans changer le code html, serait de repasser le formulaire au premier plan en utilisant la propriété css z-index. En ajoutant par exemple une classe sur le formulaire : https://jsfiddle.net/7ptmvb19/1/
0

Discussions similaires

Comment regarder un film complet sans inscriptions et gratuit ?
Black -
Misterenart -

2 réponses
Localiser un portable gratuitement sans autorisation
zazamfg -
georges97 -

8 réponses
Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses