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

38 codex

Abrir en el editor Publica tu código

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

Recomendado

23 August 2025

Noche de paralaje en Capadocia HTML/CSS

19 September 2023

Animación de texto al desplazarse

25 November 2025

Juego de combinación de palos - Código fuente del juego HTML5

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>

Recomendado

Noche de paralaje en Capadocia HTML/CSS

Animación de texto al desplazarse

Juego de combinación de palos - Código fuente del juego HTML5

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS