HTML5无内置雪花滤镜，实际通过canvas或requestAnimationFrame+DOM模拟粒子运动；canvas方案更优，需清空画布、随机参数、循环重置；DOM方案须用transform动画并GPU加速；移动端需动态减量并暂停后台动画。
HTML5 里没有内置的“雪花滤镜”
别被“滤镜”这个词带偏了——filter CSS 属性（比如 blur()、hue-rotate()）根本没法生成动态雪花。所谓“HTML5 雪花效果”，实际是用 canvas 或 requestAnimationFrame + DOM 元素模拟粒子运动，和 CSS 滤镜无关。
用 canvas 实现雪花飘落最可控
Canvas 绘制每一片雪花的位置、大小、透明度和下落速度，性能好、帧率稳，适合中等数量（200–500 片）雪花：
- 每帧清空画布用
ctx.clearRect(0, 0, canvas.width, canvas.height)，别用fillRect填黑底再画，否则雪花拖影 - 雪花建议用
ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill();，比绘制图片更快 - 给每片雪花加随机
speed和drift（横向偏移），避免整齐下落的“电梯感” - 超出画布底部后，重置 y 坐标到顶部，x 坐标也随机刷新，保持自然循环
用 CSS + JS 控制 DOM 雪花容易卡顿
如果非要用 div 模拟雪花（比如要支持文字内容或复杂样式），必须注意：
- 所有雪花元素设
position: absolute，且父容器overflow: hidden - 动画必须用
transform: translate()+opacity，绝不用top/left，否则强制重排版 - 超过 100 片时，务必启用
will-change: transform或对父容器加backface-visibility: hidden触发 GPU 加速 - 别用
setInterval更新位置——改用requestAnimationFrame，否则掉帧明显
移动端适配和性能陷阱
手机上雪花数量得砍半，否则 CPU 温度飙升、页面变烫：
立即学习“前端免费学习笔记（深入）”；
- 监听
window.devicePixelRatio和屏幕尺寸，动态调整雪花数量（比如 iPad Pro 最多 300 片，iPhone SE 限 80 片） - 暂停逻辑很重要：页面切到后台时调用
cancelAnimationFrame，切回前台再恢复，不然后台持续耗电 - 别在
touchmove事件里更新雪花——滚动时疯狂触发，直接卡死 - 如果用
canvas，记得设canvas.width和canvas.height为实际像素值，别只靠 CSS 缩放，否则模糊又慢
真正难的不是让雪花动起来，而是让它们动得不机械、不抢资源、不干扰用户操作。多数人栽在“一上来就堆 500 片”和“用 top/left 做动画”这两步上。
