Codice HTML CSS del modulo di accesso animato

29 codex

Apri nell'Editor Pubblica il Tuo Codice

Codice HTML CSS del modulo di accesso animato

Consigliato

16 December 2025

Barra di navigazione HTML con menu a discesa e stile

22 August 2025

Commento segnaposto codice HTML

22 December 2025

Codice di incorporamento del gioco HTML5 Geometry Dash Lite

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>

Consigliato

Barra di navigazione HTML con menu a discesa e stile

Commento segnaposto codice HTML

Codice di incorporamento del gioco HTML5 Geometry Dash Lite

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS