WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Plantilla HTML de formulario de inicio de sesión de Cyberpunk
971
codex
Abrir en el editor
Publica tu código
1
Recomendado
7 December 2025
Fragmento HTML de enlaces a redes sociales
14 September 2024
Activación del ojo de esbirro
16 September 2025
Ejemplo de animación de formas CSS
HTML
Copy
Cyberpunk Login
SYSTEM_ACCESS
IDENTITY
PASSPHRASE
INITIALIZE_LINK
CSS
Copy
:root { --neon-cyan: #00f3ff; --neon-pink: #ff00ff; --dark-bg: #050505; --card-bg: rgba(10, 10, 10, 0.6); --text-main: #e0e0e0; --font-display: 'Orbitron', sans-serif; --font-body: 'Rajdhani', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--dark-bg); color: var(--text-main); font-family: var(--font-body); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background-image: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 100%), linear-gradient(0deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px); background-size: 100% 100%, 40px 40px, 40px 40px; perspective: 1000px; } .scene { transform-style: preserve-3d; animation: float 6s ease-in-out infinite; } .login-card { position: relative; width: 380px; padding: 40px; background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid rgba(0, 243, 255, 0.2); box-shadow: 0 0 20px rgba(0, 243, 255, 0.1), inset 0 0 20px rgba(0, 243, 255, 0.05); transform: rotateX(5deg) rotateY(5deg); transition: transform 0.3s ease; clip-path: polygon( 0 0, 100% 0, 100% 85%, 90% 100%, 0 100% ); } .login-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--neon-cyan), transparent, var(--neon-pink)); z-index: -1; clip-path: polygon( 0 0, 100% 0, 100% 85%, 90% 100%, 0 100% ); opacity: 0.3; } .login-card:hover { transform: rotateX(0deg) rotateY(0deg) scale(1.02); box-shadow: 0 0 30px rgba(0, 243, 255, 0.2), inset 0 0 30px rgba(0, 243, 255, 0.1); } .card-header { text-align: center; margin-bottom: 40px; } h1.glitch { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--neon-cyan); position: relative; text-shadow: 2px 2px var(--neon-pink); } h1.glitch::before, h1.glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-bg); } h1.glitch::before { left: 2px; text-shadow: -1px 0 var(--neon-pink); clip: rect(24px, 550px, 90px, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; } h1.glitch::after { left: -2px; text-shadow: -1px 0 var(--neon-cyan); clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; } .input-group { position: relative; margin-bottom: 30px; } input { width: 100%; padding: 10px 0; font-size: 1.1rem; color: var(--text-main); background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); outline: none; font-family: var(--font-body); letter-spacing: 1px; transition: 0.3s; } label { position: absolute; top: 10px; left: 0; font-size: 1rem; color: rgba(255, 255, 255, 0.5); pointer-events: none; transition: 0.3s; font-family: var(--font-display); font-size: 0.8rem; } input:focus ~ label, input:valid ~ label { top: -20px; color: var(--neon-cyan); font-size: 0.7rem; } .bar { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--neon-cyan); transition: 0.3s; box-shadow: 0 0 10px var(--neon-cyan); } input:focus ~ .bar, input:valid ~ .bar { width: 100%; } .cyber-btn { width: 100%; padding: 15px; background: transparent; border: 1px solid var(--neon-cyan); color: var(--neon-cyan); font-family: var(--font-display); font-size: 1rem; cursor: pointer; position: relative; overflow: hidden; transition: 0.3s; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; } .cyber-btn:hover { background: rgba(0, 243, 255, 0.1); box-shadow: 0 0 20px rgba(0, 243, 255, 0.4); text-shadow: 0 0 5px var(--neon-cyan); } .cyber-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent); transition: 0.5s; } .cyber-btn:hover::before { left: 100%; } .card-footer { margin-top: 30px; text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 15px; } .status { color: var(--neon-pink); animation: blink 2s infinite; } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0) rotateX(5deg) rotateY(5deg); } 50% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes glitch-anim { 0% { clip: rect(30px, 9999px, 10px, 0); } 20% { clip: rect(80px, 9999px, 90px, 0); } 40% { clip: rect(10px, 9999px, 50px, 0); } 60% { clip: rect(60px, 9999px, 20px, 0); } 80% { clip: rect(20px, 9999px, 70px, 0); } 100% { clip: rect(90px, 9999px, 30px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(60px, 9999px, 20px, 0); } 20% { clip: rect(10px, 9999px, 50px, 0); } 40% { clip: rect(90px, 9999px, 30px, 0); } 60% { clip: rect(30px, 9999px, 10px, 0); } 80% { clip: rect(70px, 9999px, 20px, 0); } 100% { clip: rect(20px, 9999px, 80px, 0); } } /* Responsive */ @media (max-width: 480px) { .login-card { width: 90%; margin: 20px; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */