Plantilla HTML de formulario de inicio de sesión de Cyberpunk

1,460 codex

Abrir en el editor Publica tu código

Plantilla HTML de formulario de inicio de sesión de Cyberpunk

Recomendado

10 January 2026

Código HTML CSS del formulario de inicio de sesión animado

19 December 2025

Cargador de juegos HTML: New Super Mario Bros.

16 December 2024

Un código de Valcor27

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyberpunk Login</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scene">
        <div class="login-card">
            <div class="card-header">
                <h1 class="glitch" data-text="SYSTEM_ACCESS">SYSTEM_ACCESS</h1>
            </div>
            <form class="login-form">
                <div class="input-group">
                    <input type="text" required id="username" autocomplete="off">
                    <label for="username">IDENTITY</label>
                    <div class="bar"></div>
                </div>
                <div class="input-group">
                    <input type="password" required id="password" autocomplete="off">
                    <label for="password">PASSPHRASE</label>
                    <div class="bar"></div>
                </div>
                <button type="submit" class="cyber-btn">
                    <span class="btn-content">INITIALIZE_LINK</span>
                    <span class="glitch-effect"></span>
                </button>
            </form>
            <div class="card-footer">
                <p>SECURE CONNECTION: <span class="status">ESTABLISHED</span></p>
            </div>
        </div>
        <div class="particles"></div>
    </div>
</body>
</html>

CSS

: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;
    }
}