Formulaire de connexion holographique 3D HTML

227 securearray494

Ouvrir dans l'éditeur Publiez votre code

Formulaire de connexion holographique 3D HTML

Recommandé

24 March 2025

Un code par ribeirosarah905

29 January 2026

EaglercraftX HTML : Configuration du cadre de jeu et du serveur

29 July 2025

Liste des cartes d'entreprise avec image de marque et marketing

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