HTML 代码
<div class="relative bg-amber-50 dark:bg-stone-900 overflow-hidden font-sans text-stone-800 dark:text-stone-200">
<div class="container mx-auto px-4 py-6 md:py-8 relative z-10">
<div class="flex items-center justify-between">
<div class="flex-shrink-0">
<a href="#" class="text-2xl md:text-3xl font-extrabold tracking-tight text-amber-800 dark:text-amber-300 transform -skew-x-6 inline-block py-1 px-3 border-4 border-amber-800 dark:border-amber-300 rotate-2">
STREAMIFY
</a>
</div>
<div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
<a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Home</a>
<a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Movies</a>
<a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Series</a>
<a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Explore</a>
<button class="px-6 py-2 bg-amber-800 text-amber-50 rounded-full font-bold shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
Sign In
</button>
</div>
<div class="md:hidden flex items-center">
<button id="menu-button" class="text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-125">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu (Invisible by default, will be toggled by JS) -->
<div id="mobile-menu" class="absolute top-0 left-0 w-full h-screen bg-stone-100 dark:bg-stone-950 transform -translate-x-full transition-transform duration-500 ease-in-out md:hidden flex flex-col justify-center items-center space-y-8 z-50 overflow-hidden">
<button id="close-menu-button" class="absolute top-6 right-6 text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-150">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse">Home</a>
<a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-100">Movies</a>
<a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-200">Series</a>
<a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-300">Explore</a>
<button class="mt-8 px-8 py-3 bg-amber-800 text-amber-50 rounded-full font-bold text-xl shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
Join Now
</button>
</div>
<!-- Memphis-style geometric accents -->
<div class="absolute top-0 -left-1/4 w-3/4 h-full bg-amber-200 dark:bg-stone-700 opacity-60 transform -skew-y-6 rotate-3 z-0 pointer-events-none mix-blend-multiply"></div>
<div class="absolute bottom-0 -right-1/4 w-1/2 h-2/3 bg-amber-400 dark:bg-stone-600 opacity-60 transform skew-y-3 -rotate-6 z-0 pointer-events-none mix-blend-multiply"></div>
<div class="absolute top-1/4 right-1/4 w-32 h-32 bg-amber-600 dark:bg-amber-800 opacity-70 transform rotate-45 rounded-full z-0 pointer-events-none mix-blend-multiply"></div>
<div class="absolute bottom-1/4 left-1/4 w-16 h-16 bg-amber-300 dark:bg-stone-500 opacity-80 transform -rotate-30 border-8 border-dashed border-amber-800 dark:border-stone-400 z-0 pointer-events-none"></div>
</div>
<style>
/* Custom animation delay for pulse effect */
.animation-delay-100 {
animation-delay: 0.1s;
}
.animation-delay-200 {
animation-delay: 0.2s;
}
.animation-delay-300 {
animation-delay: 0.3s;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuButton = document.getElementById('menu-button');
const closeMenuButton = document.getElementById('close-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
menuButton.addEventListener('click', function() {
mobileMenu.classList.remove('-translate-x-full');
mobileMenu.classList.add('translate-x-0');
document.body.style.overflow = 'hidden'; // Prevent body scroll when menu is open
});
closeMenuButton.addEventListener('click', function() {
mobileMenu.classList.remove('translate-x-0');
mobileMenu.classList.add('-translate-x-full');
document.body.style.overflow = ''; // Allow body scroll
});
// Close menu if a menu item is clicked (optional)
mobileMenu.querySelectorAll('a').forEach(item => {
item.addEventListener('click', function() {
mobileMenu.classList.remove('translate-x-0');
mobileMenu.classList.add('-translate-x-full');
document.body.style.overflow = '';
});
});
// Close menu on resize if it's open and transitions to desktop view
window.addEventListener('resize', function() {
if (window.innerWidth >= 768) { // Tailwind's 'md' breakpoint
mobileMenu.classList.remove('translate-x-0');
mobileMenu.classList.add('-translate-x-full');
document.body.style.overflow = '';
}
});
});
</script>