Un código de Yotva

Abrir en el editor Video Publica tu código

Recomendado

3 June 2025

Estructura de animación de bloques CSS

5 September 2024

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

Un código de Yotva

Recomendado

Un código de Metehan

Estructura de animación de bloques CSS

Generador de contraseñas

HTML

CSS

JS

Recomendado

Un código de Metehan

Estructura de animación de bloques CSS

Generador de contraseñas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS