最近在用Google AI Studio时，无意间瞥见了侧边栏那个不起眼的“下雪”开关。点开的一瞬间，屏幕上飘起了细碎的雪花，没有复杂的 3D 渲染，也没有喧宾夺主的炫光，就是简简单单的静谧感让我瞬间想起来小时候玩给她爱的九年前，北扬克顿，鲁登道夫。
于是我无聊花了一点时间，基于手搓了一套同款特效，代码的灵感来源于 Google，但在交互上我做了更深度的定制。
为了还原那份氛围感，这套代码不仅仅是让白点往下掉，它包含了一套完整的粒子物理配置：
💻 纯原生打造： 没有任何第三方库依赖，纯 Vanilla JS + Canvas，轻量且高性能。
🎛️ 可配置面板： 我在左下角增加了一个设置按钮（FAB），点开即可实时调整雪景参数。
✨ 细节拉满：
数量控制： 从零星飘雪到暴风雪，随你调节。
物理参数： 可以控制下落速度、风力摆动，甚至雪花大小。
平滑过渡： 开启和关闭时，带有淡入淡出的呼吸感，不再生硬。
技术实现：Canvas 粒子系统
为了保证网页性能，没有使用 DOM 元素来模拟雪花，而是采用了 HTML5 Canvas。
核心逻辑封装在 SnowSystem 对象中。每一片雪花都是一个独立的类（Class），拥有自己的坐标、大小、透明度和下落速度。通过 requestAnimationFrame 进行逐帧渲染，确保在各种设备上都能丝滑流畅。
特别值得一提的是配置面板的实现。为了让这个特效能适应不同的网页背景，我把所有的参数（count, speed, wind 等）都做成了响应式的。拖动滑块，SnowSystem 会即时更新 Canvas 的渲染逻辑，所见即所得。
如何食用？
我已经将代码分享在下面，包含三个部分：
HTML： 引入 Canvas 和控制面板结构。
CSS： 处理深色模式 UI 和动效过渡。
JS： 核心粒子逻辑与交互绑定。
你可以把这套代码部署在你的：
个人博客的“关于我”页面
网站的 404 页面（增添一点凄凉美？）
或者像我一样，做一个独立的 Demo 页，没事就以此为背景发发呆。
写在最后
指尖划过屏幕，看着雪花随风摆动，希望这个小项目也能让你的网站体验变得更有温度。
如果你也喜欢这个特效，欢迎留言交流。
评论