烟花动画的 CSS 实现：随机大小与位置的完美结合

引言

在项目开发中，我们经常需要添加一些动画效果来提升用户体验。最近，我就接手了一个需要实现烟花动画的任务，要求烟花能够随机大小，并在不同位置出现。经过一番探索，我决定采用 CSS 来实现这一效果。

动画选择的艺术

选择合适的动画方式是关键。对于轻量、装饰性的动画，CSS 动画足以胜任；而对于复杂度较高的运营活动或创意小游戏，JS 动画或图形库如 Pixi.js 可能是更好的选择。同时，我们还需要考虑学习成本和工程化问题。例如，lottie-web 虽然功能强大，但文件大小可能不适合仅用于一个动画场景。综合考虑，我决定采用 CSS 来实现烟花动画。

单个烟花的诞生

我采用了序列帧的方式来实现单个烟花。首先，我要求设计师导出一组序列帧图片，然后将这些图片合成为一张图片。利用 CSS 的steps()功能符，我们可以轻松实现逐帧动画。

随机位置的奥秘

为了使烟花出现在不同位置，我添加了一个关键帧，并在不同百分比处设置了不同的transform属性。通过组合烟花动画和随机位置动画，实现了烟花在随机位置绽放的效果。

大小随机的魅力

在随机位置的基础上，我进一步添加了scale属性，使烟花的大小也能随机变化。这样，每个烟花都拥有了独特的形态。

多个烟花的盛宴

为了打造更加绚丽的视觉效果，我添加了多个烟花元素，并给每个元素设置了不同的位置和延时。这样，多个烟花就能在不同时间、不同位置随机绽放。

色彩斑斓的烟花

为了让烟花更加多彩，我利用了 CSS Mask 技术。通过将背景图作为遮罩背景，并设置不同的背景颜色，实现了烟花的颜色变化。进一步地，我定义了一个颜色变化的关键帧，使烟花在绽放过程中呈现出多种颜色。

IE 浏览器的降级处理

考虑到 IE 浏览器不支持 Mask 遮罩，我进行了降级处理。通过使用 IE 不支持的选择器:default，为 IE 浏览器提供了不同的样式，确保烟花动画在 IE 下也能正常显示。

动画与用户体验的平衡

适当的动画可以提升用户体验，但并非所有用户都喜欢动画。为了尊重用户的选择，我增加了媒体查询prefers-reduced-motion，以便在用户系统设置中关闭动画时，禁用不必要的动画。

完整代码

HTML 部分

CSS 部分

总结

通过本次实践，我深刻体会到了 CSS 动画的强大和灵活。选择合适的动画方式、利用 CSS 序列帧动画、组合多个动画、使用 Mask 改变颜色、区分 IE 和现代浏览器、跟随系统设置关闭动画——这些技巧共同构成了一个完美烟花动画的实现。

CSS 实现烟花动画并不复杂，但要做到完美却需要细心和技巧。希望我的分享能对你有所帮助，如果你觉得不错，欢迎点赞、收藏、转发！