Código HTML CSS del formulario de inicio de sesión animado

358 codex

Abrir en el editor Publica tu código

Código HTML CSS del formulario de inicio de sesión animado

Recomendado

26 June 2024

Formulario de registro/registro con doble control deslizante

16 January 2025

Un código de mematixd3162

8 September 2025

Página de inicio de muebles: Diseño adaptable y tienda

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>

Recomendado

Formulario de registro/registro con doble control deslizante

Un código de mematixd3162

Página de inicio de muebles: Diseño adaptable y tienda

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS