mobile wallpaper 1
mobile wallpaper 2
mobile wallpaper 3
mobile wallpaper 4
152 字
1 分钟
深色霓虹与玻璃拟态设计笔记
2026-08-17

设计令牌#

我用一组 CSS 变量统一定义主题色与字体,再交给 Tailwind v4 的 @theme 暴露为工具类。

克制地使用 Three.js#

整站只在首页 Hero 放了一处 Three.js 星场粒子,其余界面保持纯 CSS。这样既保留氛围,又不牺牲性能。

  • 尊重 prefers-reduced-motion,降级为静态一帧
  • 限制粒子数量(约 900)与像素比(≤2)
  • 窗口缩放时重算相机宽高比

玻璃拟态#

.glass {
background: rgba(17, 20, 42, 0.55);
backdrop-filter: blur(14px);
border: 1px solid rgba(120, 140, 220, 0.18);
}

玻璃质感让卡片在深色星场背景上浮动,既轻盈又不抢内容。

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

深色霓虹与玻璃拟态设计笔记
https://blog.neutronstar.fun/posts/neon-theme/
作者
NeutronStar
发布于
2026-08-17
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录