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

Abrir en el editor Publica tu código

Recomendado

4 December 2025

Sitio web de portafolio completo

27 September 2024

<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>

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

Recomendado

Hocico de hierro

Sitio web de portafolio completo

Latidos del corazón

HTML

CSS

JS

Recomendado

Hocico de hierro

Sitio web de portafolio completo

Latidos del corazón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS