这个网站的设计初衷是打造一个沉浸式的太空主题作品集,让访客在浏览项目时有探索星系的体验感。
从零搭建太空主题个人作品集
记录本站从设计到上线的全过程: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 · 响应式设计