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

968 codex

Abrir en el editor Publica tu código

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

Recomendado

13 June 2025

Un código de Metehan

8 February 2025

Un código de bachir123

20 April 2025

El juego de pelota por diversión (por el Sr.)

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