Menú de Navegación con Proyección Holográfica

snippet.publishedOn 15 de enero de 2024 Avanzado

Un menú de navegación futurista con efectos de proyección holográfica, ilusiones de profundidad 3D, animaciones de refracción de luz y experiencias visuales inmersivas

#holográfico #proyección #3D #futurista #luz #refracción #inmersivo #menú

Vista Previa en Vivo

Implementación del Código

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menú de Navegación con Proyección Holográfica</title>
</head>
<body>
    <nav class="holographic-nav">
        <div class="nav-container">
            <div class="logo">
                <h2>HoloNav</h2>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">Inicio</a>
                    <div class="hologram-effect"></div>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Servicios</a>
                    <div class="hologram-effect"></div>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Portfolio</a>
                    <div class="hologram-effect"></div>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contacto</a>
                    <div class="hologram-effect"></div>
                </li>
            </ul>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Orbitron', monospace;
    background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(0, 255, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.holographic-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h2 {
    color: #00ffff;
    font-weight: 900;
    font-size: 1.8rem;
    text-shadow: 
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 30px #00ffff;
    animation: hologramFlicker 2s ease-in-out infinite alternate;
}

@keyframes hologramFlicker {
    0% {
        opacity: 1;
        text-shadow: 
            0 0 10px #00ffff,
            0 0 20px #00ffff,
            0 0 30px #00ffff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 
            0 0 5px #00ffff,
            0 0 15px #00ffff,
            0 0 25px #00ffff;
    }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-item {
    position: relative;
    perspective: 1000px;
}

.nav-link {
    display: block;
    padding: 0.8rem 1.5rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 8px;
}

.hologram-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(0, 255, 255, 0.1) 0%,
        rgba(255, 0, 255, 0.1) 50%,
        rgba(0, 255, 0, 0.1) 100%);
    border-radius: 8px;
    opacity: 0;
    transform: rotateY(-90deg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.nav-item:hover .hologram-effect {
    opacity: 1;
    transform: rotateY(0deg);
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.5),
        inset 0 0 20px rgba(255, 0, 255, 0.2);
}

.nav-item:hover .nav-link {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
    border-color: rgba(0, 255, 255, 0.5);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #00ffff;
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px #00ffff;
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 2rem;
        gap: 1rem;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .hamburger {
        display: flex;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}