* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Orbitron', 'Arial', sans-serif;
background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 70%);
min-height: 100vh;
overflow-x: hidden;
perspective: 1000px;
}
.holographic-menu {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
width: 90%;
max-width: 900px;
}
.menu-container {
position: relative;
background: linear-gradient(135deg,
rgba(0, 255, 255, 0.1) 0%,
rgba(255, 0, 255, 0.1) 50%,
rgba(0, 255, 0, 0.1) 100%);
border: 2px solid transparent;
border-radius: 20px;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
box-shadow:
0 0 30px rgba(0, 255, 255, 0.3),
inset 0 0 30px rgba(255, 255, 255, 0.1);
animation: hologram-flicker 3s infinite;
}
.menu-container::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
#00ffff, #ff00ff, #00ff00, #ffff00, #00ffff);
border-radius: 20px;
z-index: -1;
animation: border-glow 2s linear infinite;
}
.hologram-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
90deg,
transparent 0px,
rgba(0, 255, 255, 0.03) 1px,
transparent 2px
),
repeating-linear-gradient(
0deg,
transparent 0px,
rgba(255, 0, 255, 0.03) 1px,
transparent 2px
);
border-radius: 20px;
animation: scan-lines 1s linear infinite;
}
.logo-text {
font-size: 2rem;
font-weight: bold;
color: #00ffff;
text-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 30px #00ffff;
position: relative;
z-index: 2;
}
.logo-projection {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(45deg, transparent, #00ffff, transparent);
opacity: 0.3;
border-radius: 10px;
animation: projection-pulse 2s ease-in-out infinite;
}
.menu-items {
display: flex;
list-style: none;
gap: 30px;
margin: 0;
padding: 0;
}
.menu-link {
position: relative;
color: #ffffff;
text-decoration: none;
font-weight: 600;
padding: 15px 25px;
border-radius: 10px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 2px;
overflow: hidden;
transform-style: preserve-3d;
}
.link-text {
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.hologram-effect {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
rgba(0, 255, 255, 0.2),
rgba(255, 0, 255, 0.2),
rgba(0, 255, 0, 0.2));
opacity: 0;
transform: translateZ(-10px) rotateX(45deg);
transition: all 0.4s ease;
border-radius: 10px;
}
.menu-link:hover {
transform: translateY(-5px) translateZ(20px);
box-shadow:
0 10px 30px rgba(0, 255, 255, 0.4),
0 0 50px rgba(255, 0, 255, 0.3);
}
.menu-link:hover .hologram-effect {
opacity: 1;
transform: translateZ(0) rotateX(0deg);
}
.menu-link:hover .link-text {
text-shadow:
0 0 10px #00ffff,
0 0 20px #ff00ff,
0 0 30px #00ff00;
transform: translateZ(10px);
}
.projection-grid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 255, 0, 0.1) 0%, transparent 50%);
border-radius: 20px;
animation: grid-pulse 4s ease-in-out infinite;
}
@keyframes hologram-flicker {
0%, 100% { opacity: 1; }
98% { opacity: 1; }
99% { opacity: 0.8; }
99.5% { opacity: 1; }
}
@keyframes border-glow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes scan-lines {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes projection-pulse {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.05);
}
}
@keyframes grid-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}
@media (max-width: 768px) {
.menu-container {
flex-direction: column;
gap: 20px;
padding: 20px;
}
.menu-items {
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.menu-link {
padding: 10px 15px;
font-size: 0.9rem;
}
.logo-text {
font-size: 1.5rem;
}
.holographic-menu {
width: 95%;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Enhanced holographic effects
const menuLinks = document.querySelectorAll('.menu-link');
const menuContainer = document.querySelector('.menu-container');
// Create floating particles
function createParticle() {
const particle = document.createElement('div');
particle.style.position = 'absolute';
particle.style.width = '2px';
particle.style.height = '2px';
particle.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
particle.style.borderRadius = '50%';
particle.style.pointerEvents = 'none';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animation = `float-particle ${Math.random() * 3 + 2}s linear infinite`;
menuContainer.appendChild(particle);
setTimeout(() => {
if (particle.parentNode) {
particle.parentNode.removeChild(particle);
}
}, 5000);
}
// Add particle animation CSS
const style = document.createElement('style');
style.textContent = `
@keyframes float-particle {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
@keyframes hologram-distort {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(1px); }
50% { transform: translateX(-1px); }
75% { transform: translateX(1px); }
}
`;
document.head.appendChild(style);
// Create particles periodically
setInterval(createParticle, 500);
// Enhanced hover effects
menuLinks.forEach(link => {
link.addEventListener('mouseenter', function() {
// Add holographic distortion
this.style.animation = 'hologram-distort 0.1s infinite';
// Create burst effect
for (let i = 0; i < 5; i++) {
setTimeout(() => createParticle(), i * 50);
}
});
link.addEventListener('mouseleave', function() {
this.style.animation = '';
});
// Add click effect
link.addEventListener('click', function(e) {
e.preventDefault();
// Create ripple effect
const ripple = document.createElement('div');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.cssText = `
position: absolute;
width: ${size}px;
height: ${size}px;
left: ${x}px;
top: ${y}px;
background: radial-gradient(circle, rgba(0, 255, 255, 0.6) 0%, transparent 70%);
border-radius: 50%;
transform: scale(0);
animation: hologram-ripple 0.8s ease-out;
pointer-events: none;
z-index: 1;
`;
this.appendChild(ripple);
setTimeout(() => {
if (ripple.parentNode) {
ripple.parentNode.removeChild(ripple);
}
}, 800);
});
});
// Add ripple animation
const rippleStyle = document.createElement('style');
rippleStyle.textContent = `
@keyframes hologram-ripple {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(rippleStyle);
// Random glitch effects
function addGlitchEffect() {
const randomLink = menuLinks[Math.floor(Math.random() * menuLinks.length)];
const originalTransform = randomLink.style.transform;
randomLink.style.transform = `translateX(${Math.random() * 4 - 2}px) translateY(${Math.random() * 4 - 2}px)`;
randomLink.style.filter = 'hue-rotate(180deg)';
setTimeout(() => {
randomLink.style.transform = originalTransform;
randomLink.style.filter = '';
}, 100);
}
// Add periodic glitch effects
setInterval(addGlitchEffect, 3000);
// Mouse tracking for 3D effect
menuContainer.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
const rotateX = (y - 0.5) * 10;
const rotateY = (x - 0.5) * -10;
this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
menuContainer.addEventListener('mouseleave', function() {
this.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
});
});