Formulario de inicio de sesión holográfico 3D HTML

25 securearray494

Abrir en el editor Video Publica tu código

Formulario de inicio de sesión holográfico 3D HTML

Recomendado

30 August 2024

Botón con efecto de desplazamiento de Drácula animado

13 January 2026

Plantilla HTML para sitio web de películas

17 July 2025

Sinfonía del estado estacionario

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Holographic Login</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="scene">
        <div class="hologram-cube">
            
            
            <div class="panel front-panel">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <h3 style="letter-spacing: 3px; margin-top: 20px;">SYSTEM LOCKED</h3>
                <p style="font-size: 12px; opacity: 0.7;">[ HOVER TO INITIALIZE ]</p>
            </div>

<form class="panel login-panel">
                <h2>Access Node</h2>
                
                <div class="input-group">
                    <input type="text" id="username" required autocomplete="off">
                    <label for="username">Neural ID</label>
                </div>
                
                <div class="input-group">
                    <input type="password" id="password" required>
                    <label for="password">Decryption Key</label>
                </div>
                
                <button type="submit">Login</button>
            </form>

</div>
    </div>

</body>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #050508;
    background-image: radial-gradient(circle at center, #0f1520 0%, #000 100%);
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

/* 3D Scene Setup */
.scene {
    width: 320px;
    height: 320px;
    perspective: 1200px;
}

.hologram-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* Springy, unusual rotation curve */
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.4); 
}

/* Trigger the 3D roll on hover or when an input is focused */
.scene:hover .hologram-cube,
.hologram-cube:focus-within {
    transform: rotateX(90deg);
}

/* Shared Panel Styling */
.panel {
    position: absolute;
    width: 320px;
    height: 320px;
    background: rgba(0, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.1) inset, 
                0 0 20px rgba(0, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Front Face (Idle State) */
.front-panel {
    transform: rotateY(0deg) translateZ(160px);
    color: #0ff;
    text-shadow: 0 0 15px #0ff;
    animation: hologram-pulse 2s infinite alternate;
}

/* Bottom Face (The Actual Form) */
.login-panel {
    /* Rotated to be the floor, pushed down by half its height */
    transform: rotateX(-90deg) translateZ(160px);
    padding: 40px;
    background: rgba(15, 5, 25, 0.4);
    border-color: rgba(255, 0, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.1) inset, 
                0 0 20px rgba(255, 0, 255, 0.1);
}

/* Form Elements Styling */
h2 {
    color: #f0f;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-top: 0;
    margin-bottom: 35px;
    text-shadow: 0 0 15px #f0f;
}

.input-group {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

input {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 0, 255, 0.3);
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
    border-bottom-color: #0ff;
    box-shadow: 0 10px 10px -10px #0ff;
}

label {
    position: absolute;
    top: 10px;
    left: 0;
    color: rgba(255, 0, 255, 0.6);
    pointer-events: none;
    transition: 0.3s ease all;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
}

/* Float the label up when input is focused or filled */
input:focus ~ label,
input:valid ~ label {
    top: -18px;
    font-size: 10px;
    color: #0ff;
    text-shadow: 0 0 8px #0ff;
}

button {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid #f0f;
    color: #f0f;
    font-family: inherit;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.2) inset;
    margin-top: 10px;
}

button:hover {
    background: #f0f;
    color: #000;
    box-shadow: 0 0 20px #f0f, 0 0 40px #f0f;
    border-color: #fff;
}

/* Animations */
@keyframes hologram-pulse {
    0% { 
        opacity: 0.7; 
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.1) inset; 
    }
    100% { 
        opacity: 1; 
        box-shadow: 0 0 50px rgba(0, 255, 255, 0.4) inset, 0 0 10px rgba(0, 255, 255, 0.3); 
    }
}

Recomendado

Botón con efecto de desplazamiento de Drácula animado

Plantilla HTML para sitio web de películas

Sinfonía del estado estacionario

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS