使用 anime.js v4 构建的交互式动效合集
页面用两套独立粒子系统各占一个 <canvas>，统一纯色底 #1a1a2e，无背景渐变。天气加载完成后直接 display 切换，无过渡动画。
| 层 | 元素 | 初始 | 切换后 |
|---|---|---|---|
| 背景 | body | 统一纯色 #1a1a2e，不变 | |
| Canvas 1 | #canvas-default | V1 蓝色粒子 | display: none |
| Canvas 2 | #canvas-weather | display: none | 天气粒子 |
| 类型 | 视觉 | 特点 |
|---|---|---|
| ☀️ sunny | 径向渐变光点 | 正弦脉动呼吸感 + 连线 |
| 🌙 clear_night | 径向渐变光点 | 正弦脉动呼吸感 + 连线 |
| ☁️ cloudy | 灰色小圆点 | 缓慢漂移 + 弱连线 |
| 🌫️ fog | 大半透明模糊球 | 15-45px，透明度 0.02-0.08 |
| 🌧️ rain | 倾斜雨滴线段 | vy 8-12，落底重生 |
| ❄️ snow | 白点 + 光晕 | 正弦横向摆动飘雪 |
| ⛈️ thunder | 大雨 + 白色 flash | 随机间隔闪电覆盖全屏 |
粒子数量按视口面积动态计算，每种天气除数不同。切换后旧系统 destroy() 停止动画循环。只有晴天/多云类型才画连线，其他跳过 O(n²) 计算。