modulo di registrazione/accesso all'animazione

1065 brianz502

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

modulo di registrazione/accesso all'animazione

Consigliato

2 June 2025

Effetto di confusione del testo

14 May 2025

Un codice di toninrazafison

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
 <meta charset="UTF-8">
 <title>Andev Web</title>
 <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="container">
 <div class="login-box">
 <h2>Login</h2>
 <form action="#">
 <div class="input-box">
 <input type="email" required>
 <label>Email</label>
 </div>
 <div class="input-box">
 <input type="password" required>
 <label>Password</label>
 </div>
 <div class="forgot-password">
 <a href="#">Forgot Password?</a>
 </div>
 <button type="submit" class="btn">Login</button>
 <div class="signup-link">
 <a href="#">Signup</a>
 </div>
 </form>
 </div>

</div>
 
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins";
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1f293a;
  min-height: 100vh;
}

.container {
  position: relative;
  width: 256px;
  height: 256px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container span {
  position: absolute;
  left: 0;
  width: 32px;
  height: 6px;
  background: #2c4766;
  border-radius: 8px;
  transform-origin: 128px;
  transform: scale(2.2) rotate(calc(var(--i) * (360deg / 50)));
  animation: animateBlink 3s linear infinite;
  animation-delay: calc(var(--i) * (3s / 50));
}

@keyframes animateBlink {
  0% {
    background: #0ef;
  }

25% {
    background: #2c4766;
  }
}

.login-box {
  position: absolute;
  width: 400px;
}

.login-box form {
  width: 100%;
  padding: 0 50px;
}

h2 {
  font-size: 2em;
  color: #0ef;
  text-align: center;
}
.input-box {
  position: relative;
  margin: 25px 0;
}

.input-box input {
  width: 100%;
  height: 50px;
  background: transparent;
  border: 2px solid #2c4766;
  outline: none;
  border-radius: 40px;
  font-size: 1em;
  color: #fff;
  padding: 0 20px;
  transition: 0.5s;
}

.input-box input:focus,
.input-box input:valid {
  border-color: #0ef;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 1em;
  color: #fff;
  pointer-events: none;
  transition: 0.5s ease;
}

.input-box input:focus ~ label,
.input-box input:valid ~ label {
  top: 1px;
  font-size: 0.8em;
  background-color: #1f293a;
  padding: 0 6px;
  color: #0ef;
}

.forgot-password {
  margin: -15px 0 10px;
  text-align: center;
}

.forgot-password a {
  font-size: 0.85em;
  color: #fff;
  text-decoration: none;
}

.forgot-password a:hover {
  text-decoration: underline;
}

.btn {
  width: 100%;
  height: 45px;
  border-radius: 45px;
  background: #0ef;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1em;
  color: #1f293a;
  font-weight: 600;
}

.signup-link {
  margin: 20px 0 10px;
  text-align: center;
}

.signup-link a {
  font-size: 1em;
  color: #0ef;
  text-decoration: none;
  font-weight: 600;
}

.signup-link a:hover {
  text-decoration: underline;
}

modulo di registrazione/accesso all'animazione

Consigliato

Un codice di alejandrokundrah

Effetto di confusione del testo

Un codice di toninrazafison

HTML

CSS

JS

Consigliato

Un codice di alejandrokundrah

Effetto di confusione del testo

Un codice di toninrazafison

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS