HTML 代码
<div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
<nav class="w-full max-w-sm lg:max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform perspective-1000 rotateX-3 animate-fade-in-up transition-all duration-300 hover:shadow-2xl dark:shadow-sky-900 dark:shadow-md" style="transform-style: preserve-3d;">
<div class="p-6 lg:p-8 bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 text-white shadow-md transform translateZ-20 relative z-10 rounded-t-3xl">
<h2 class="text-2xl lg:text-3xl font-extrabold tracking-tight drop-shadow-lg text-center">
Your Adventure Guide
</h2>
<p class="text-sm lg:text-base text-gray-100 mt-1 opacity-90 text-center">
Jump to your next destination.
</p>
</div>
<ul class="p-6 lg:p-8 space-y-4 lg:space-y-5 relative z-0 before:absolute before:left-10 before:top-0 before:bottom-0 before:w-1 before:bg-gradient-to-b before:from-purple-300 before:via-pink-300 before:to-yellow-300 dark:before:from-purple-700 dark:before:via-pink-700 dark:before:to-yellow-600 before:rounded-full before:shadow-inner">
<li class="relative group">
<a href="#overview" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
<span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-purple-500 dark:bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
1
</span>
<div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
<h3 class="font-semibold text-lg lg:text-xl">Overview</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Explore the highlights.</p>
</div>
<svg class="w-6 h-6 lg:w-7 lg:h-7 text-purple-400 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</li>
<li class="relative group">
<a href="#destinations" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-pink-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
<span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-pink-500 dark:bg-pink-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
2
</span>
<div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
<h3 class="font-semibold text-lg lg:text-xl">Top Destinations</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Find your next journey.</p>
</div>
<svg class="w-6 h-6 lg:w-7 lg:h-7 text-pink-400 dark:text-pink-300 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</li>
<li class="relative group">
<a href="#activities" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-yellow-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
<span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-yellow-500 dark:bg-yellow-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
3
</span>
<div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
<h3 class="font-semibold text-lg lg:text-xl">Activities Guide</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Fun things to do.</p>
</div>
<svg class="w-6 h-6 lg:w-7 lg:h-7 text-yellow-400 dark:text-yellow-300 group-hover:text-yellow-600 dark:group-hover:text-yellow-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</li>
<li class="relative group">
<a href="#booking" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
<span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-purple-500 dark:bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
4
</span>
<div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
<h3 class="font-semibold text-lg lg:text-xl">Booking Info</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Plan your trip.</p>
</div>
<svg class="w-6 h-6 lg:w-7 lg:h-7 text-purple-400 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</li>
</ul>
<div class="p-6 lg:p-8 bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 text-white text-center text-sm lg:text-base rounded-b-3xl transform translateZ-20 relative z-10 shadow-inner mt-4">
<p>Start your incredible journey today!</p>
</div>
</nav>
<style>
/* Custom 3D-like transformations (simulated using Tailwind's transform utilities) */
.perspective-1000 { perspective: 1000px; }
.rotateX-3 { transform: rotateX(3deg); }
.perspective-600 { perspective: 600px; }
.translateZ-10 { transform: translateZ(10px); }
.translateZ-20 { transform: translateZ(20px); }
.rotateX-2 { transform: rotateX(2deg); }
/* Keyframe animation for initial fade-in and subtle 3D lift */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px) rotateX(10deg) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) rotateX(3deg) scale(1);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.8s ease-out forwards;
}
/* Ensure smooth transitions for transform properties */
.transform {
transition-property: transform, background-color, box-shadow, color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
</style>
</div>