Formulaire de connexion animé

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 December 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Login Form</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      overflow: hidden;
    }

@keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

.container {
      position: relative;
      width: 400px;
      height: 500px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
      transform-style: preserve-3d;
      perspective: 1000px;
      animation: containerFloat 6s ease-in-out infinite;
    }

@keyframes containerFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }

.container::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 380px;
      height: 420px;
      background: linear-gradient(0deg, transparent, 
                 rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
      transform-origin: bottom right;
      animation: animate 6s linear infinite;
    }

.container::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 380px;
      height: 420px;
      background: linear-gradient(0deg, transparent, 
                 rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
      transform-origin: bottom right;
      animation: animate 6s linear infinite;
      animation-delay: -3s;
    }

@keyframes animate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

.form {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 40px;
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

.logo {
      text-align: center;
      margin-bottom: 30px;
    }

.logo span {
      font-size: 2.5em;
      font-weight: 700;
      letter-spacing: 2px;
      background: linear-gradient(45deg, #ff9a9e, #a1c4fd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

.inputBox {
      position: relative;
      width: 100%;
      margin-top: 30px;
    }

.inputBox input {
      position: relative;
      width: 100%;
      padding: 15px 20px;
      outline: none;
      font-size: 1em;
      color: #333;
      border-radius: 10px;
      border: none;
      background: rgba(255, 255, 255, 0.7);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: 0.5s;
    }

.inputBox span {
      position: absolute;
      left: 0;
      padding: 15px 20px;
      pointer-events: none;
      font-size: 1em;
      color: #666;
      transition: 0.5s;
    }

.inputBox input:valid ~ span,
    .inputBox input:focus ~ span {
      color: #a1c4fd;
      transform: translateX(10px) translateY(-7px);
      font-size: 0.75em;
      padding: 0 10px;
      background: white;
      border-radius: 10px;
    }

.inputBox input:valid,
    .inputBox input:focus {
      border-bottom: 2px solid #a1c4fd;
    }

.enter {
      position: relative;
      width: 100%;
      height: 50px;
      margin-top: 40px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 1em;
      font-weight: 600;
      letter-spacing: 2px;
      transition: 0.5s;
      border: none;
      overflow: hidden;
      background: linear-gradient(90deg, #ff9a9e, #a1c4fd);
      color: white;
    }

.enter:hover {
      transform: scale(1.05);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

.enter::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
    }

.floating-elements {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 0;
    }

.floating-elements div {
      position: absolute;
      display: block;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      animation: floatUp 15s linear infinite;
      bottom: -150px;
    }

.floating-elements div:nth-child(1) {
      left: 20%;
      width: 15px;
      height: 15px;
      animation-delay: 0s;
      animation-duration: 12s;
    }

.floating-elements div:nth-child(2) {
      left: 35%;
      width: 25px;
      height: 25px;
      animation-delay: 2s;
      animation-duration: 16s;
    }

.floating-elements div:nth-child(3) {
      left: 55%;
      width: 20px;
      height: 20px;
      animation-delay: 4s;
      animation-duration: 13s;
    }

.floating-elements div:nth-child(4) {
      left: 70%;
      width: 30px;
      height: 30px;
      animation-delay: 1s;
      animation-duration: 15s;
    }

.floating-elements div:nth-child(5) {
      left: 85%;
      width: 15px;
      height: 15px;
      animation-delay: 7s;
      animation-duration: 12s;
    }

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

.links {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }

.links a {
      color: #666;
      text-decoration: none;
      font-size: 0.9em;
      transition: 0.3s;
    }

.links a:hover {
      color: #a1c4fd;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="floating-elements">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="form">
      <div class="logo">
        <span>LOGIX</span>
      </div>
      <div class="inputBox">
        <input type="text" required="required">
        <span>Username</span>
      </div>
      <div class="inputBox">
        <input type="password" required="required">
        <span>Password</span>
      </div>
      <button class="enter">LOGIN</button>
      <div class="links">
        <a href="#">Forgot Password?</a>
        <a href="#">Sign Up</a>
      </div>
    </div>
  </div>

Formulaire de connexion animé

Recommandé

Un code par Valcor27

Un code de Mikeykun

Un code par alejandrokundrah

HTML

CSS

JS

Recommandé

Un code par Valcor27

Un code de Mikeykun

Un code par alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS