WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modèle HTML de formulaire de connexion Cyberpunk
19
codex
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
14 October 2023
Mini-jeu de mémoire
22 August 2025
Marché informatique : achetez des ordinateurs portables, des ordinateurs de bureau et plus encore
26 January 2025
Un code par alqsdeus
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) */