Categoría · Menús de Navegación Nivel de Dificultad · Avanzado Publicado el · 15 de enero de 2024
Menú de Navegación con Proyección Holográfica
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ú
Diseño Responsivo
Sí
Soporte para Modo Oscuro
No
líneas
228
Compatibilidad del Navegador
No
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
Menú de Navegación con Proyección Holográfica
Un menú de navegación futurista con efectos de proyección holográfica que simula ilusiones de profundidad 3D y animaciones de refracción de luz.
Características
- Efectos holográficos: Simulación de proyección 3D con transformaciones CSS
- Animaciones de luz: Efectos de refracción y dispersión luminosa
- Diseño futurista: Estética cyberpunk con colores neón
- Responsive: Adaptable a dispositivos móviles
- Efectos de profundidad: Ilusiones visuales 3D inmersivas
Uso
Perfecto para sitios web de tecnología, gaming, ciencia ficción o cualquier proyecto que requiera una estética futurista y moderna.
Personalización
- Modifica los colores neón en las propiedades
text-shadowybox-shadow - Ajusta la perspectiva 3D cambiando el valor de
perspective - Personaliza las animaciones modificando los
@keyframes - Cambia los gradientes holográficos en
.hologram-effect
Compatibilidad
- Chrome/Edge: Soporte completo
- Firefox: Soporte completo
- Safari: Soporte completo
- IE: No compatible (requiere CSS3 avanzado)
JavaScript (Opcional)
// Funcionalidad del menú hamburguesa
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Efecto de parpadeo holográfico aleatorio
setInterval(() => {
const logo = document.querySelector('.logo h2');
logo.style.animation = 'none';
setTimeout(() => {
logo.style.animation = 'hologramFlicker 2s ease-in-out infinite alternate';
}, 100);
}, Math.random() * 5000 + 3000);HTML
40
líneas
CSS
188
líneas
<!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>