एनिमेटेड लॉगिन फॉर्म

अनुशंसित

25 November 2023

3D पृष्ठभूमि के साथ लॉगिन और पंजीकरण फ़ॉर्म

8 September 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>

एनिमेटेड लॉगिन फॉर्म

अनुशंसित

होवर एनिमेटेड बटन पर

3D पृष्ठभूमि के साथ लॉगिन और पंजीकरण फ़ॉर्म

लॉगिन हैकर

HTML

CSS

JS

अनुशंसित

होवर एनिमेटेड बटन पर

3D पृष्ठभूमि के साथ लॉगिन और पंजीकरण फ़ॉर्म

लॉगिन हैकर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS