WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Página de inicio de Matriz Roja
1777
Metehan
Abrir en el editor
Video
Publica tu código
0
Recomendado
21 September 2024
Control deslizante de recorrido rotatorio
4 February 2026
Nuevo Super Mario Bros.
15 May 2025
Plantilla de sitio web de comercio electrónico HTML CSS
HTML
Copy
Modern Giriş Sayfası
Hoş Geldiniz
Kullanıcı Adı
Şifre
Giriş Yap
Şifremi Unuttum
•
Yeni Hesap Oluştur
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body { min-height: 100vh; background: linear-gradient(135deg, #1a0001, #440000); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } /* 3D Shapes Animation */ .shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .shape { position: absolute; filter: blur(1px); opacity: 0.5; animation: float 10s infinite; } .shape:nth-child(1) { width: 100px; height: 100px; background: #ff0000; top: 20%; left: 10%; animation-delay: 0s; transform: rotate(45deg); } .shape:nth-child(2) { width: 150px; height: 150px; background: #ff2222; top: 60%; right: 10%; animation-delay: 2s; border-radius: 50%; } .shape:nth-child(3) { width: 80px; height: 80px; background: #ff4444; bottom: 20%; left: 20%; animation-delay: 4s; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } .container { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 2rem; border-radius: 16px; width: 90%; max-width: 400px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.2); } h1 { color: #fff; text-align: center; margin-bottom: 1.5rem; font-size: 1.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .fingerprint-container { text-align: center; margin: 1rem 0 2rem 0; } .fingerprint { width: 80px; height: 80px; cursor: pointer; transition: all 0.3s ease; filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5)); } .fingerprint:hover { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8)); } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group input { width: 100%; padding: 1rem; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #fff; font-size: 1rem; transition: all 0.3s ease; } .form-group input:focus { outline: none; border-color: #ff0000; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 15px rgba(255, 0, 0, 0.3); } .form-group label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.6); pointer-events: none; transition: all 0.3s ease; } .form-group input:focus + label, .form-group input:not(:placeholder-shown) + label { top: 0; left: 0.5rem; font-size: 0.75rem; padding: 0 0.5rem; background: #ff0000; border-radius: 4px; color: #fff; } .btn { width: 100%; padding: 1rem; background: #ff0000; color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .btn:hover { background: #cc0000; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3); } .links { margin-top: 1.5rem; text-align: center; } .links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.875rem; transition: all 0.3s ease; margin: 0 0.5rem; } .links a:hover { color: #ff0000; text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
JS
Copy
document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Button animation effect const btn = document.querySelector('.btn'); btn.style.transform = 'scale(0.95)'; setTimeout(() => { btn.style.transform = 'translateY(-2px)'; }, 200); console.log('Login attempt:', { username, password }); }); // Fingerprint scanning animation const fingerprint = document.querySelector('.fingerprint'); let isScanning = false; fingerprint.addEventListener('click', function() { if (isScanning) return; isScanning = true; this.style.filter = 'drop-shadow(0 0 20px rgba(255, 0, 0, 0.8))'; let degree = 0; const scanAnimation = setInterval(() => { degree += 10; this.style.transform = `rotate(${degree}deg) scale(1.1)`; if (degree >= 360) { clearInterval(scanAnimation); this.style.transform = 'rotate(0deg) scale(1)'; this.style.filter = 'drop-shadow(0 0 10px rgba(255, 0, 0, 0.5))'; isScanning = false; } }, 30); }); // Float label effect document.querySelectorAll('.form-group input').forEach(input => { input.addEventListener('focus', function() { this.parentElement.classList.add('focused'); }); input.addEventListener('blur', function() { if (!this.value) { this.parentElement.classList.remove('focused'); } }); }); // Random movement for shapes const shapes = document.querySelectorAll('.shape'); shapes.forEach(shape => { setInterval(() => { const randomX = Math.random() * 20 - 10; const randomY = Math.random() * 20 - 10; shape.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 360}deg)`; }, 3000); });