web前端入门到实战：这个炫酷的播放粒子效果，你也可以学会！

当谈到运动和动画时，可能没有什么比粒子更让我喜欢了，这就是为什么每次我探索新技术时，我总是以尽可能多的创建粒子来演示。

在本文中，单击按钮时，我们将使用Web Animations API创建烟花效果，从而制作更多的粒子魔术。

效果如下

让我们开始吧！

---

浏览器支持

在我撰写本文时，除了Safari和Internet Explorer（IE是全民公敌、Safari是新时代的IE）之外，所有主流浏览器至少部分支持Web动画API。Safari支持可以在“实验性特性”开发人员菜单中启用。

这个浏览器支持的数据来自Caniuse。数字表示浏览器支持该版本及以上的功能。

HTML设置

该演示不需要太多的HTML，我们将使用一个 <button> 元素，但它可以是另一种类型的标签元素。如果我们真的想的话，我们甚至可以听到页面上的任何点击声，让粒子从任何地方弹出。<