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

22 codex

Abrir en el editor Publica tu código

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

Recomendado

19 October 2024

Portafolio de desarrolladores HTML V2

17 December 2023

Rotación del Logotipo de Chrome

10 February 2025

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

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

Recomendado

Portafolio de desarrolladores HTML V2

Rotación del Logotipo de Chrome

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS