Un código de Yotva

857 Yotva

Abrir en el editor Publica tu código

Recomendado

19 October 2024

Formulario de inicio de sesión HTML animado

10 July 2025

Ejemplo HTML de pantalla de carga animada con CSS

16 October 2025

Animación de carga CSS con efectos de fragmento

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Authentification - Vagues Liquides</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Arial', sans-serif;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
        }

.wave-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

.wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 200px;
            background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
            animation: wave-animation 10s ease-in-out infinite;
            opacity: 0.7;
        }

.wave:nth-child(2) {
            height: 150px;
            background: linear-gradient(45deg, rgba(118, 75, 162, 0.6), rgba(240, 147, 251, 0.6));
            animation: wave-animation 8s ease-in-out infinite reverse;
            opacity: 0.5;
        }

.wave:nth-child(3) {
            height: 100px;
            background: linear-gradient(45deg, rgba(240, 147, 251, 0.4), rgba(245, 87, 108, 0.4));
            animation: wave-animation 6s ease-in-out infinite;
            opacity: 0.3;
        }

.wave::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: 50% 50% 0 0;
        }

@keyframes wave-animation {
            0%, 100% {
                transform: translateX(-50%) translateY(0px);
                border-radius: 40% 60% 70% 30%;
            }
            25% {
                transform: translateX(-60%) translateY(-10px);
                border-radius: 30% 70% 50% 50%;
            }
            50% {
                transform: translateX(-70%) translateY(-20px);
                border-radius: 60% 40% 30% 70%;
            }
            75% {
                transform: translateX(-40%) translateY(-10px);
                border-radius: 50% 50% 60% 40%;
            }
        }

.floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

.bubble {
            position: absolute;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
            border-radius: 50%;
            backdrop-filter: blur(5px);
            animation: bubble-float 8s ease-in-out infinite;
        }

.bubble:nth-child(1) {
            width: 60px;
            height: 60px;
            left: 10%;
            animation-delay: 0s;
        }

.bubble:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 30%;
            animation-delay: 2s;
        }

.bubble:nth-child(3) {
            width: 80px;
            height: 80px;
            right: 20%;
            animation-delay: 4s;
        }

.bubble:nth-child(4) {
            width: 30px;
            height: 30px;
            right: 10%;
            animation-delay: 6s;
        }

@keyframes bubble-float {
            0%, 100% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
                transform: scale(1);
            }
            90% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                transform: translateY(-100px) scale(0);
                opacity: 0;
            }
        }

.container {
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 20px;
        }

.auth-box {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(25px);
            border-radius: 30px;
            padding: 50px;
            width: 420px;
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
            animation: float-in 1s ease-out;
        }

@keyframes float-in {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

.auth-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, 
                rgba(255, 255, 255, 0.1) 0%, 
                rgba(255, 255, 255, 0.05) 50%, 
                rgba(255, 255, 255, 0.1) 100%);
            border-radius: 30px;
            animation: shimmer 3s ease-in-out infinite;
            pointer-events: none;
        }

@keyframes shimmer {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

.logo-section {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

.logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            font-weight: bold;
            animation: logo-pulse 2s ease-in-out infinite;
            box-shadow: 0 10px 30px rgba(255, 154, 158, 0.4);
        }

@keyframes logo-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

.logo-title {
            color: white;
            font-size: 2.2rem;
            font-weight: 300;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

.logo-subtitle {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1rem;
            font-weight: 300;
        }

.tab-switcher {
            display: flex;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 5px;
            margin-bottom: 35px;
            position: relative;
            z-index: 2;
        }

.tab-btn {
            flex: 1;
            padding: 15px 25px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 1rem;
            font-weight: 500;
            position: relative;
            z-index: 3;
        }

.tab-btn.active {
            color: white;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }

.form-wrapper {
            position: relative;
            z-index: 2;
        }

.form-panel {
            display: none;
            animation: slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

.form-panel.active {
            display: block;
        }

@keyframes slide-in {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

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

.input-label {
            display: block;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8px;
            font-size: 0.95rem;
            font-weight: 500;
        }

.input-field {
            width: 100%;
            padding: 18px 22px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
        }

.input-field::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

.input-field:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

.submit-button {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border: none;
            border-radius: 20px;
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 15px 35px rgba(255, 154, 158, 0.4);
            position: relative;
            overflow: hidden;
        }

.submit-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: translate(-50%, -50%);
        }

.submit-button:hover::before {
            width: 300px;
            height: 300px;
        }

.submit-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(255, 154, 158, 0.5);
        }

.submit-button:active {
            transform: translateY(-1px);
        }

.extra-options {
            text-align: center;
            margin-top: 25px;
        }

.extra-link {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }

.extra-link:hover {
            color: white;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

.social-section {
            margin-top: 30px;
            text-align: center;
        }

.social-divider {
            position: relative;
            margin-bottom: 20px;
        }

.social-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        }

.social-divider span {
            background: rgba(255, 255, 255, 0.1);
            padding: 0 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            backdrop-filter: blur(10px);
            border-radius: 15px;
        }

.social-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

.social-btn {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            color: white;
            font-size: 1.2rem;
        }

.social-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="wave-container">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
    </div>

<div class="container">
        <div class="auth-box">
            <div class="logo-section">
                <div class="logo">L</div>
                <h1 class="logo-title">Liquid</h1>
                <p class="logo-subtitle">Expérience fluide</p>
            </div>

<div class="tab-switcher">
                <button class="tab-btn active" onclick="showForm('login')">Connexion</button>
                <button class="tab-btn" onclick="showForm('register')">Inscription</button>
            </div>

<div class="form-wrapper">
                <div class="form-panel active" id="loginPanel">
                    <form>
                        <div class="input-group">
                            <label class="input-label">Adresse email</label>
                            <input type="email" class="input-field" placeholder="exemple@email.com" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Mot de passe</label>
                            <input type="password" class="input-field" placeholder="Votre mot de passe" required>
                        </div>
                        <button type="submit" class="submit-button">Se connecter</button>
                    </form>
                    
                    <div class="extra-options">
                        <a href="#" class="extra-link">Mot de passe oublié ?</a>
                    </div>

<div class="social-section">
                        <div class="social-divider">
                            <span>ou continuez avec</span>
                        </div>
                        <div class="social-buttons">
                            <button class="social-btn">G</button>
                            <button class="social-btn">F</button>
                            <button class="social-btn">T</button>
                        </div>
                    </div>
                </div>

<div class="form-panel" id="registerPanel">
                    <form>
                        <div class="input-group">
                            <label class="input-label">Nom complet</label>
                            <input type="text" class="input-field" placeholder="Votre nom complet" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Adresse email</label>
                            <input type="email" class="input-field" placeholder="exemple@email.com" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Mot de passe</label>
                            <input type="password" class="input-field" placeholder="Créer un mot de passe" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Confirmer le mot de passe</label>
                            <input type="password" class="input-field" placeholder="Répéter le mot de passe" required>
                        </div>
                        <button type="submit" class="submit-button">Créer un compte</button>
                    </form>

<div class="social-section">
                        <div class="social-divider">
                            <span>ou inscrivez-vous avec</span>
                        </div>
                        <div class="social-buttons">
                            <button class="social-btn">G</button>
                            <button class="social-btn">F</button>
                            <button class="social-btn">T</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Reset all tabs
            tabButtons.forEach(btn => btn.classList.remove('active'));
            loginPanel.classList.remove('active');
            registerPanel.classList.remove('active');

if (formType === 'login') {
                loginPanel.classList.add('active');
                tabButtons[0].classList.add('active');
            } else {
                registerPanel.classList.add('active');
                tabButtons[1].classList.add('active');
            }
        }

// Animation des inputs
        document.querySelectorAll('.input-field').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.style.transform = 'translateY(-2px)';
            });
            
            input.addEventListener('blur', function() {
                this.parentElement.style.transform = 'translateY(0)';
            });
        });

// Effet de clic sur les boutons sociaux
        document.querySelectorAll('.social-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 150);
            });
        });
    </script>
</body>
</html>

Recomendado

Formulario de inicio de sesión HTML animado

Ejemplo HTML de pantalla de carga animada con CSS

Animación de carga CSS con efectos de fragmento

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS