WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Connexion et inscription animées
3871
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
7 December 2025
Metehan
2 March 2023
Effet de texte glissant
1 October 2023
Effet de texte lumineux
HTML
Copy
Iniciar sesión y registrarse
Andev web
Iniciar sesión
Iniciar sesión
Correo electrónico
Contraseña
Recordarme
¿Olvidaste la contraseña?
Iniciar sesión
¿No tienes una cuenta?
Registrarse
Registro
Nombre de usuario
Correo electrónico
Contraseña
Acepto los términos y condiciones
Registrarse
¿Ya tienes una cuenta?
Iniciar sesión
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;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-size: cover; background: url('https://images.unsplash.com/photo-1716654195483-de7a5ad4d23c?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center; } header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 100px; display: flex; justify-content: space-between; align-items: center; z-index: 99; } .logo { font-size: 2em; color: #ffffff; user-select: none; } .navigation a { position: relative; font-size: 1.1em; color: #ffffff; text-decoration: none; font-weight: 500; margin-left: 40px; } .navigation a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 3px; background: #ffffff; border-radius: 5px; transform-origin: right; transform: scaleX(0); transition: transform .5s; } .navigation a:hover::after { transform-origin: left; transform: scaleX(1); } .navigation .bthLogin-popup { width: 130px; height: 50px; background: transparent; border: 2px solid #ffffff; outline: none; border-radius: 6px; cursor: pointer; font-size: 1.1em; color: #ffffff; font-weight: 500; margin-left: 40px; transition: .5s; } .navigation .bthLogin-popup:hover { background: #ffffff; color: #162938; } .wrapper { position: relative; width: 400px; height: 440px; background: transparent; border: 2px solid rgba(255, 255, 255, .5); border-radius: 20px; backdrop-filter: blur(20px); box-shadow: 0 0 30px rgba(0, 0, 0, .5); display: flex; justify-content: center; align-items: center; overflow: hidden; transform: scale(0); transition: transform .5s ease, height .2s ease; } .wrapper.active-popup { transform: scale(1); } .wrapper.active { height: 520px; } .wrapper .form-box { width: 100%; padding: 40px; } .wrapper .form-box.login { transition: transfrom .18s ease; transform: translateX(0); } .wrapper.active .form-box.login { transition: none; transform: translateX(-400px); } .wrapper .form-box.register { position: absolute; transition: none; transform: translateX(400px); } .wrapper.active .form-box.register { transition: transfrom .18s ease; transform: translateX(0); } .wrapper .icon-close { position: absolute; top: 0; right: 0; width: 45px; height: 45px; background: #162938; font-size: 2em; color: #ffffff; display: flex; justify-content: center; align-items: center; border-bottom-left-radius: 20px; cursor: pointer; z-index: 1; } .form-box h2 { font-size: 2em; color: #ffffff; text-align: center; } .input-box { position: relative; width: 100%; height: 50px; border-bottom: 2px solid #ffffff; margin: 30px 0; } .input-box label { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); font-size: 1em; color: #ffffff; font-weight: 500; pointer-events: none; transition: .5s; } .input-box input:focus ~ label, .input-box input:valid ~ label { top: -5px; } .input-box input { width: 100%; height: 100%; background: transparent; border: none; outline: none; font-size: 1em; color: #ffffff; font-weight: 600; padding: 0 35px 0 5px; } .input-box .icon { position: absolute; right: 8px; font-size: 1.2em; color: #ffffff; line-height: 57px; } .remember-forgot { font-size: .9em; color: #ffffff; font-weight: 500; margin: -15px 0 15px; display: flex; justify-content: space-between; } .remember-forgot label input { accent-color: #ffffff; margin-right: 3px; } .remember-forgot a { color: #ffffff; text-decoration: none; } .remember-forgot a:hover { text-decoration: underline; } .bth { width: 100%; height: 45px; background: #ffffff; border: none; outline: none; border-radius: 6px; cursor: pointer; font-size: 1em; color: #162938; font-weight: 500; } /*Andev Web*/ .login-register { font-size: .9em; color: #fff; text-align: center; font-weight: 500; margin: 25px 0 10px; } .login-register p a { color: #fff; text-decoration: none; font-weight: 600; } .login-register p a:hover { text-decoration: underline; }
JS
Copy
const wrapper = document.querySelector('.wrapper'); const loginLink = document.querySelector('.login-link'); const registerLink = document.querySelector('.register-link'); const bthPopup = document.querySelector('.bthLogin-popup'); const iconClose = document.querySelector('.icon-close'); registerLink.addEventListener('click', () => wrapper.classList.add('active')); loginLink.addEventListener('click', () => wrapper.classList.remove('active')); bthPopup.addEventListener('click', () => wrapper.classList.add('active-popup')); iconClose.addEventListener('click', () => wrapper.classList.remove('active-popup'));