Formulario de inicio de sesión animado con CSS y fondo líquido

Abrir en el editor Video Publica tu código

Recomendado

28 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Animated Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            background: #0f0c29;
            background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

/* Animated Background Blobs */
        .background-blobs {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            filter: blur(80px);
        }

.blob {
            position: absolute;
            background: #ff0080;
            border-radius: 50%;
            animation: move 20s infinite alternate;
        }

.blob:nth-child(1) {
            width: 400px;
            height: 400px;
            top: -100px;
            left: -100px;
            background: #ff0080;
            opacity: 0.6;
        }

.blob:nth-child(2) {
            width: 300px;
            height: 300px;
            bottom: -50px;
            right: -50px;
            background: #7928ca;
            opacity: 0.6;
            animation-delay: -5s;
        }

.blob:nth-child(3) {
            width: 250px;
            height: 250px;
            top: 50%;
            left: 50%;
            background: #00dfd8;
            opacity: 0.4;
            animation-delay: -10s;
        }

@keyframes move {
            from { transform: translate(0, 0) rotate(0deg) scale(1); }
            to { transform: translate(100px, 100px) rotate(360deg) scale(1.2); }
        }

/* Login Card */
        .login-container {
            position: relative;
            width: 400px;
            max-width: 90%;
            padding: 40px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
            animation: fadeIn 1s ease-out;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

.login-container h2 {
            color: #fff;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

.input-group {
            position: relative;
            margin-bottom: 30px;
        }

.input-group input {
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            background: transparent;
            border: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            outline: none;
            transition: 0.3s;
        }

.input-group label {
            position: absolute;
            top: 10px;
            left: 0;
            color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            transition: 0.3s;
        }

.input-group input:focus ~ label,
        .input-group input:valid ~ label {
            top: -20px;
            font-size: 12px;
            color: #00dfd8;
        }

.input-group input:focus {
            border-bottom: 2px solid #00dfd8;
        }

.login-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(45deg, #ff0080, #7928ca);
            border: none;
            border-radius: 50px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 10px 20px rgba(255, 0, 128, 0.3);
        }

.login-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 25px rgba(255, 0, 128, 0.5);
        }

.login-btn:active {
            transform: scale(0.98);
        }

.options {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

.options a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            font-size: 13px;
            transition: 0.3s;
        }

.options a:hover {
            color: #fff;
        }

/* Unusual Shape Animation */
        .login-container::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(45deg, #ff0080, #00dfd8);
            border-radius: 25px;
            opacity: 0;
            transition: 0.5s;
        }

.login-container:hover::before {
            opacity: 0.3;
            filter: blur(10px);
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <form action="#">
            <div class="input-group">
                <input type="text" required>
                <label>Username</label>
            </div>
            <div class="input-group">
                <input type="password" required>
                <label>Password</label>
            </div>
            <button type="submit" class="login-btn">Sign In</button>
            <div class="options">
                <a href="#">Forgot Password?</a>
                <a href="#">Create Account</a>
            </div>
        </form>
    </div>

document.addEventListener('mouseenter', () => {
            card.style.transition = 'none';
        });

document.addEventListener('mouseleave', () => {
            card.style.transition = 'all 0.5s ease';
            card.style.transform = `rotateY(0deg) rotateX(0deg)`;
        });
    </script>
</body>
</html>

Formulario de inicio de sesión animado con CSS y fondo líquido

Recomendado

Duelo de cambiaformas

Tarjeta de bicicleta Pure CSS

Efecto de la carta

HTML

CSS

JS

Recomendado

Duelo de cambiaformas

Tarjeta de bicicleta Pure CSS

Efecto de la carta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS