Formulário de registro HTML animado

33 codex

Abrir no Editor Publique Seu Código

Recomendado

26 May 2025

Exemplo de página da Web do portfólio

5 April 2025

um site de plataforma

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>

Formulário de registro HTML animado

Recomendado

Um Código de Liamgilles76

Exemplo de página da Web do portfólio

um site de plataforma

HTML

CSS

JS

Recomendado

Um Código de Liamgilles76

Exemplo de página da Web do portfólio

um site de plataforma

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS