Formulaire de connexion holographique 3D HTML

20 securearray494

Ouvrir dans l'éditeur Video Publiez votre code

Formulaire de connexion holographique 3D HTML

Recommandé

17 February 2026

Modèle HTML de page d'accueil Roblox

22 December 2025

Code d'intégration HTML5 du jeu Geometry Dash Lite

30 January 2025

CodePen Home Dessine un cœur ❤️✍️

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

Recommandé

Modèle HTML de page d'accueil Roblox

Code d'intégration HTML5 du jeu Geometry Dash Lite

CodePen Home Dessine un cœur ❤️✍️

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS