这个效果看起来还不错。

https://yangda.vip/annual

1. 复古科技风格

  • 颜色：以深色为主（如 #1a1a1a​、#0c0c0c​），搭配金属质感（如 #8a7a62​、#d4c7a9​）和荧光绿（如 #3fbd3f​），营造出复古科技感。

  • 字体：使用 Share Tech Mono​ 等等宽字体，增强科技感。

2. 金属质感与立体感

  • 边框：通过 border​ 和 box-shadow​ 实现金属边框效果（如 linear-gradient​ 渐变）。

  • 螺丝装饰：使用 .screw​ 类模拟金属螺丝，增强复古机械感。

3. 像素化元素

  • 像素网格：通过 .pixel-grid​ 和 .pixel​ 实现像素化格子，适合复古游戏或科技主题。

  • 动态效果：像素格子有过渡动画（如 transition: background-color 1.5s ease​）。

4. 屏幕效果

  • 内发光：使用 box-shadow​ 的 inset​ 属性模拟屏幕内发光（如 inset 0 0 20px rgba(0, 20, 0, 0.8)​）。

  • 扫描线：通过 CSS 实现扫描线效果（未完全展示，但可通过伪元素或背景图案实现）。

5. 状态指示器

  • LED 灯：使用 .led​ 类模拟 LED 指示灯，增强交互反馈。

6. 布局与层次

  • 居中布局：.container​ 使用 flex​ 布局居中内容。

  • 层次分明：通过 z-index​ 和 position​ 实现层次感（如 .dashboard::before​）。

7. 细节装饰

  • 标题样式：大写字母、字间距和阴影效果（如 text-shadow​）。

  • 信息面板：.info-panel​ 使用深色背景和边框，突出内容。

8. 响应式设计

  • 适配性：min-height: 100vh​ 和 max-width​ 确保在不同设备上显示一致。