← 返回文章列表
TECH BLOG · 2026-07-01

从零搭建太空主题个人作品集

记录本站从设计到上线的全过程:Canvas 星空、CSS 3D 轨道、流星雨转场与响应式适配。

这个网站的设计初衷是打造一个沉浸式的太空主题作品集,让访客在浏览项目时有探索星系的体验感。

视觉设计

主色调选用深蓝(#081327)+ 金色(#f1bd45)+ 青色(#7de4ee),营造宇宙深空氛围。所有图标使用像素风格 GIF,契合复古科幻美学。毛玻璃卡片配合 backdrop-filter,在星空背景下形成半透明层次。

技术实现

1) Canvas 星空背景:200+ 粒子闪烁效果,部分大星带十字光芒;2) CSS 3D 轨道动画:椭圆环 rotateX 模拟透视,JS 实时计算行星位置并应用 depth 缩放;3) 流星雨转场:Canvas 绘制径向流光条纹,用于跨页面跳转动画。

性能优化

星空粒子使用 requestAnimationFrame + 对象池避免 GC;轨道动画限制在视口内的元素才更新;所有动画使用 will-change 和 transform GPU 加速。

技术栈

HTML · CSS · JavaScript · Canvas · requestAnimationFrame · 响应式设计