एनिमेटेड HTML रजिस्टर फ़ॉर्म

822 codex

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

12 December 2025

रफ़ल फ़्लैश गेम प्लेयर HTML एम्बेड

17 July 2025

HTML SVG नेविगेशन बार कोड

7 May 2024

प्रस्तुतियाँ वेबसाइट टेम्पलेट HTML और CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Register Form</title>
    <style>
        /* Basic Reset & Body Styling */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #333;
            overflow: hidden; /* Prevent scrollbar during initial animation */
        }

/* Form Container */
        .register-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            text-align: center;
            box-sizing: border-box;
            opacity: 0; /* Start hidden for animation */
            transform: translateY(20px); /* Start slightly below for slide-up effect */
            animation: fadeInSlideUp 0.8s ease-out forwards;
            animation-delay: 0.2s; /* Delay the main form animation slightly */
        }

/* Animation Keyframes for main container */
        @keyframes fadeInSlideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Form Title */
        .register-container h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 2em;
            letter-spacing: 1px;
            opacity: 0; /* Start hidden for animation */
            transform: translateY(-10px); /* Start slightly above for slide-down effect */
            animation: textFadeIn 1s ease-out forwards;
            animation-delay: 0.5s; /* Delay title animation */
        }

/* Animation Keyframes for title */
        @keyframes textFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Form Group (for labels and inputs) */
        .form-group {
            margin-bottom: 20px;
            text-align: left;
            position: relative;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
            transition: color 0.3s ease;
        }

.form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1em;
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

.form-group input:focus {
            outline: none;
            border-color: #2575fc;
            box-shadow: 0 0 8px rgba(37, 117, 252, 0.3);
        }

/* Submit Button */
        .register-button {
            width: 100%;
            padding: 15px;
            background-color: #2575fc;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            margin-top: 20px;
            overflow: hidden; /* For ripple effect if added later */
            position: relative;
        }

.register-button:hover {
            background-color: #1a5acb;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

.register-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

/* Already have an account link */
        .login-link {
            margin-top: 25px;
            font-size: 0.9em;
            color: #777;
        }

.login-link a {
            color: #2575fc;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

.login-link a:hover {
            color: #1a5acb;
            text-decoration: underline;
        }

/* Optional: Subtle background animation */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, transparent 50%),
                        radial-gradient(circle at bottom right, rgba(255,255,255,0.1) 0%, transparent 50%);
            animation: backgroundPulse 10s infinite alternate;
            z-index: -1;
        }

@keyframes backgroundPulse {
            0% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <h2>Register Account</h2>
        <form action="#" method="POST">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="Enter your email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Enter your password" required>
            </div>
            <div class="form-group">
                <label for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm your password" required>
            </div>
            <button type="submit" class="register-button">Register</button>
        </form>
        <p class="login-link">Already have an account? <a href="#">Login here</a></p>
    </div>
</body>
</html>

अनुशंसित

रफ़ल फ़्लैश गेम प्लेयर HTML एम्बेड

HTML SVG नेविगेशन बार कोड

प्रस्तुतियाँ वेबसाइट टेम्पलेट HTML और CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS