视频适配天气背景需静音、循环、裁剪；canvas适合雨雪粒子动画，需维护数组与requestAnimationFrame；CSS仅适用图标级动画，无法模拟真实粒子运动。

video 做天气背景最直接，但容易卡顿、失焦、静音失效；canvas 绘制雨雪云更可控，适合做“动态倾盆大雨”或“飘雪”这类强节奏动画；纯 CSS 动画只适合图标级天气表现（如太阳旋转、云朵平移），无法模拟真实粒子运动。

用 video 实现天气背景：静音、循环、裁剪是硬门槛

浏览器策略强制要求 autoplay 必须配合 muted，否则会被拦截。不加 muted 会导致视频黑屏、控制台报错 DOMException: play() failed because the user didn't interact with the document first。

• playsinline 必须加在 iOS 上避免全屏跳转
• object-fit: cover 是防止拉伸变形的关键，不能用 100% 100% 粗暴撑满
• 视频文件建议用 MP4 H.264 编码，体积控制在 2–5MB 内；4K 视频在中低端设备上大概率掉帧
• 不要把 video 放进 background CSS 属性里——它不支持视频背景，只能用定位层叠

用 canvas 实现雨/雪动画：性能和随机性得自己控

Canvas 雨滴不是“画完就完”，而是每帧重绘 + 位移 + 重置。核心逻辑是维护一个雨滴数组，每个雨滴含 x、y、speed、length、opacity 等属性。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用 requestAnimationFrame 替代 setInterval，避免时间漂移和丢帧
• 雨滴的 y 增量要乘以设备像素比（window.devicePixelRatio），否则在 Retina 屏上显得慢
• 每次清空画布用 ctx.clearRect(0, 0, canvas.width, canvas.height)，别用 fillStyle 覆盖，后者会残留残影
• 雪花建议加轻微横向飘动（x += Math.sin(y * 0.01) * 0.3），否则全是直线下落，假

纯 CSS 天气图标动画：适合状态切换，不适合持续粒子流

CSS 动画本质是关键帧插值，它能很好表达“云从左到右飘过”或“太阳光晕脉动”，但没法让每颗雨滴有独立生命周期。一旦需要“新雨滴不断生成、老雨滴到底消失”，就必须切到 JS。

立即学习“前端免费学习笔记（深入）”；

• @keyframes 中避免用 transform: scale() 做雨滴下落——它是缩放，不是位移，视觉上像“变大后突然掉落”
• 多云动画推荐用两个 .cloud 元素，不同 animation-duration 和 delay 错开，模拟层次感
• 雷电闪效果可用 box-shadow: 0 0 80px #fff + 极短 0.05s 动画，但别连播超过 3 次，易致眩晕

真正难的不是“怎么动”，而是“什么时候停”。比如用户切到其他标签页，video 会自动暂停，但 canvas 动画不会——得监听 document.hidden 手动 cancelAnimationFrame。这点很容易被忽略，导致后台耗电飙升。