Diseño de formulario de inicio de sesión animado con CSS

870 samiyarashuri9

Abrir en el editor Publica tu código

Diseño de formulario de inicio de sesión animado con CSS

Recomendado

13 February 2026

Pelea escolar de Roblox: Juego de agarrar, golpear y suplex

24 November 2025

Cargador de juego de Unity: Ejemplo de aves

28 August 2025

Atilla Demir: desarrollador web, diseñador y blog creativo

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Login</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: #1c1c1c;
            /* Deep dark background */
            overflow: hidden;
        }

/* The container for the spinning effect */
        .box {
            position: relative;
            width: 380px;
            height: 420px;
            background: #1c1c1c;
            border-radius: 8px;
            overflow: hidden;
        }

/* The spinning gradient beam */
        .box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
            z-index: 1;
            transform-origin: bottom right;
            animation: animate 6s linear infinite;
        }

/* The second beam for color contrast (Magenta) */
        .box::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
            z-index: 1;
            transform-origin: bottom right;
            animation: animate 6s linear infinite;
            animation-delay: -3s;
            /* Delays it to be on the opposite side */
        }

/* The inner form container overlay */
        .form-content {
            position: absolute;
            inset: 4px;
            /* Creates the border thickness */
            background: #222;
            /* Slightly lighter than body */
            padding: 50px 40px;
            border-radius: 8px;
            z-index: 2;
            display: flex;
            flex-direction: column;
        }

@keyframes animate {
            0% {
                transform: rotate(0deg);
            }

100% {
                transform: rotate(360deg);
            }
        }

h2 {
            color: #fff;
            font-weight: 500;
            text-align: center;
            letter-spacing: 0.1em;
        }

/* Input Styling with Floating Animation */
        .inputBox {
            position: relative;
            width: 100%;
            margin-top: 35px;
        }

.inputBox input {
            position: relative;
            width: 100%;
            padding: 20px 10px 10px;
            background: transparent;
            outline: none;
            border: none;
            box-shadow: none;
            color: #23242a;
            font-size: 1em;
            letter-spacing: 0.05em;
            transition: 0.5s;
            z-index: 10;
        }

.inputBox span {
            position: absolute;
            left: 0;
            padding: 20px 0px 10px;
            pointer-events: none;
            color: #8f8f8f;
            font-size: 1em;
            letter-spacing: 0.05em;
            transition: 0.5s;
        }

/* Logic for floating label */
        .inputBox input:valid~span,
        .inputBox input:focus~span {
            color: #fff;
            font-size: 0.75em;
            transform: translateY(-34px);
        }

/* The animated underline */
        .inputBox i {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #fff;
            border-radius: 4px;
            overflow: hidden;
            transition: 0.5s;
            pointer-events: none;
        }

.inputBox input:valid~i,
        .inputBox input:focus~i {
            height: 44px;
            /* Expands to fill background */
        }

/* Links styling */
        .links {
            display: flex;
            justify-content: space-between;
        }

.links a {
            margin: 10px 0;
            font-size: 0.75em;
            color: #8f8f8f;
            text-decoration: none;
        }

.links a:hover,
        .links a:nth-child(2) {
            color: #fff;
        }

/* Submit Button */
        input[type="submit"] {
            border: none;
            outline: none;
            padding: 9px 25px;
            background: #fff;
            cursor: pointer;
            font-size: 0.9em;
            border-radius: 4px;
            font-weight: 600;
            width: 100px;
            margin-top: 10px;
        }

input[type="submit"]:active {
            opacity: 0.8;
        }

/* The Glow Effect behind the box */
        .border-line {
            position: absolute;
            top: 0;
            inset: 0;
        }

/* Adds a subtle pulse to the form */
        .box:hover .form-content {
            background: #25252b;
            transition: 0.5s;
        }
    </style>
</head>

<body>

<div class="box">
        <div class="form-content">
            <h2>Sign In</h2>
            <form>
                <div class="inputBox">
                    <input type="text" required="required">
                    <span>Username</span>
                    <i></i>
                </div>
                <div class="inputBox">
                    <input type="password" required="required">
                    <span>Password</span>
                    <i></i>
                </div>
                <div class="links">
                    <a href="#">Forgot Password</a>
                    <a href="#">Signup</a>
                </div>
                <input type="submit" value="Login">
            </form>
        </div>
    </div>

</body>

</html>

CSS