这个模板使用 HTML5 + Tailwind CSS(CDN 引入,无需本地安装)实现,包含导航栏、沉浸式英雄区、核心板块、页脚,还加入了星空动态效果和鼠标跟随的光效,贴合 “时空穿梭” 的科幻氛围:
如果是导航网站配合时空穿梭跳转页面,效果更好https://www.81dir.com/site-483.html

背景采用深黑 + 蓝紫渐变的科幻色调,贴合 “时空” 的神秘感;
自定义 text-gradient 工具类实现渐变文字,shuttle-glow 实现穿梭光效阴影;
动态星空背景通过 JS 生成随机星星,并添加闪烁动画,增强沉浸感。
鼠标跟随光效:监听鼠标移动事件,让光效元素跟随鼠标,静止时自动缩小,提升互动感;
旋转的时空环:通过 CSS animate-spin 实现环形元素缓慢旋转,模拟时空穿梭的视觉效果;
卡片 hover 光效:鼠标悬停时触发光效阴影,强化交互反馈。
使用 Tailwind 的 md: 前缀区分移动端 / 桌面端样式,导航栏在移动端隐藏为菜单按钮;
文字大小使用 clamp() 函数自适应屏幕宽度,卡片布局在移动端单列、桌面端三列。