Code HTML et CSS du formulaire de connexion animé

804 codex

Ouvrir dans l'éditeur Publiez votre code

Code HTML et CSS du formulaire de connexion animé

Recommandé

18 December 2025

Code source HTML5 du jeu Monkey Mart

11 January 2024

Écran de chargement avec points

14 October 2024

Paiement - Formulaire

HTML

<!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>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #0f0c29;
            background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
            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%; }
        }

.login-box {
            position: relative;
            width: 400px;
            padding: 40px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
            animation: fadeIn 1.5s ease-out;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

.login-box h2 {
            color: #fff;
            text-align: center;
            margin-bottom: 30px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

.user-box {
            position: relative;
            margin-bottom: 30px;
        }

.user-box input {
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
            transition: 0.5s;
        }

.user-box label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: 0.5s;
        }

.user-box input:focus ~ label,
        .user-box input:valid ~ label {
            top: -20px;
            left: 0;
            color: #03e9f4;
            font-size: 12px;
        }

.user-box input:focus {
            border-bottom: 1px solid #03e9f4;
        }

.submit-btn {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: #03e9f4;
            font-size: 16px;
            text-decoration: none;
            text-transform: uppercase;
            overflow: hidden;
            transition: 0.5s;
            margin-top: 20px;
            letter-spacing: 4px;
            background: transparent;
            border: 1px solid #03e9f4;
            cursor: pointer;
            width: 100%;
        }

.submit-btn:hover {
            background: #03e9f4;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #03e9f4,
                        0 0 25px #03e9f4,
                        0 0 50px #03e9f4,
                        0 0 100px #03e9f4;
        }

/* Animated border lines */
        .login-box span {
            position: absolute;
            display: block;
        }

.login-box span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: btn-anim1 2s linear infinite;
        }

@keyframes btn-anim1 {
            0% { left: -100%; }
            50%, 100% { left: 100%; }
        }

.login-box span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: btn-anim2 2s linear infinite;
            animation-delay: .5s;
        }

@keyframes btn-anim2 {
            0% { top: -100%; }
            50%, 100% { top: 100%; }
        }

.login-box span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: btn-anim3 2s linear infinite;
            animation-delay: 1s;
        }

@keyframes btn-anim3 {
            0% { right: -100%; }
            50%, 100% { right: 100%; }
        }

.login-box span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: btn-anim4 2s linear infinite;
            animation-delay: 1.5s;
        }

@keyframes btn-anim4 {
            0% { bottom: -100%; }
            50%, 100% { bottom: 100%; }
        }
    </style>
</head>
<body>

<div class="login-box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <h2>Login</h2>
        <form action="#">
            <div class="user-box">
                <input type="text" name="username" required="">
                <label>Username</label>
            </div>
            <div class="user-box">
                <input type="password" name="password" required="">
                <label>Password</label>
            </div>
            <button type="submit" class="submit-btn">
                Submit
            </button>
        </form>
    </div>

</body>
</html>

CSS