是另一篇实战教程。本实用教程将教您创建粒子魔法效果。关注我，你也可以学习和理解它。说到运动和动画，可能没有什么比粒子更让我喜欢了，这就是为什么每次我探索一种新技术时，我总是通过创建尽可能多的粒子来演示。在本文中，我们将使用WebAnimationsAPI在单击按钮时创建烟花效果，从而产生更多的粒子魔法。效果如下。本文的演示和完整代码已经放在我博客的代码小页上了。让我们开始吧！浏览器支持在撰写本文时，WebAnimationsAPI至少得到了所有主要浏览器的部分支持，除了Safari和InternetExplorer（IE是公敌，Safari是新时代的IE）。Safari支持可以在“实验性功能”开发者菜单中启用。本浏览器支持的数据来自Caniuse。数字表示浏览器支持该版本及以上版本的功能。HTML设置这个演示不需要太多的HTML，我们将使用CSS设置由于每个粒子都有一些共同的CSS属性，我们可以在页面的全局CSS中进行设置。因为您可以在HTML中创建自定义标记元素，所以我将使用标记名称来避免语义标记。但问题是，您可以为、或您选择的任何标签设置动画。粒子{边界半径：50%；左：0；指针事件：无；位置：固定；top:0;}这里有几点需要注意：粒子不应该与页面布局交互，所以我们设置一个固定的位置，top和left分别为0px。我们还将删除指针事件，以避免在HTML粒子显示在屏幕上时与用户进行任何交互。由于样式化按钮和页面布局并不是本文的真正目的，我将把它放在一边。JavaScript设置以下是我们将在JavaScript中执行的六个步骤：监听按钮上的点击事件创建30个元素并将它们附加到为每个粒子设置随机宽度、高度和背景让每个粒子当每个particlefadeout,animateitfromthemousepositiontoarandomposition动画完成后，将从DOM中移除Step1:Clickevent//我们首先检查浏览器是否支持WebAnimationsAPIif(document.body.animate){//如果支持，我们为按钮添加一个点击监听器document.querySelector('#button').addEventListener('click',pop);}步骤2：粒子//pop()函数是在每次点击时调用functionpop(e){//循环一次生成30个粒子for(leti=0;i<30;i++){//我们将鼠标坐标传递给createParticle()functioncreateParticle(e.clientX,e.clientY);}}functioncreateParticle(x,y){//创建自定义粒子元素constparticle=document.createElement('particle');//将元素添加到主体document.body.appendChild(particle);}步骤3：粒子宽度、高度和背景functioncreateParticle(x,y){//[...]//计算从5px到5px的随机大小25pxconstsize=Math.floor(Math.random()*20+5);//将大小应用于每个粒子particle.style.width=`${size}px`;particle.style.height=`${size}px`;//在蓝色/紫色调色板中生成随机颜色particle.style.background=`hsl(${Math.random()*90+180},70%,60%)`;}第4步：为每个粒子设置动画functioncreateParticle(x,y){//[...]//在鼠标constdestinationX=x+(Math.random()-0.5)*2*75;constdestinationY=y+(Math.random()-0.5)*2*75;//将动画存储在一个变量中，因为稍后我们需要它constanimation=particle.animate([{//设置粒子的原点位置//我们将粒子偏移一半大小，使其以鼠标变换为中心：`translate(${x-(size/2)}px,${y-(size/2)}px)`,opacity:1},{//我们将最终坐标定义为第二个关键帧变换：`translate(${destinationX}px,${destinationY}px)`,opacity:0}],{//设置随机持续时间从500到1500msduration:500+Math.random()*1000,easing:'cubic-bezier(0,.9,.57,1)',//将每个粒子延迟一个从0ms到200ms的随机值delay:Math.random()*200});}因为我们有一个随机延迟，粒子等待开始animating是在屏幕左上角可见的，为了防止这种情况，我们可以在全局CSS粒子中为每个粒子设置零不透明度{/*同前*/opacity:0;}第五步：删除后面的粒子动画完成从DOM元素中删除粒子元素很重要，因为我们每次单击都会创建30个新元素，因此浏览器的内存会很快填满，从而导致问题。我们可以这样做：functioncreateParticle(x,y){//和以前一样//动画结束后，从DOM中移除元素animation.onfinish=()=>{particle.remove();};}最终结果把上面所有的代码放在一起，我们就得到了我们想要的：一个五颜六色的粒子爆炸效果。发挥创意因为所有这些都是使用CSS，所以修改粒子样式很容易，这里有五个使用各种形状甚至字符的示例！这个效果请访问：https://codepen.io/Mamboleoo/...如果对你有启发和帮助，可以关注、收藏或留言讨论。这是对作者最大的鼓励。作者简介：Web前端工程师，全栈开发工程师，持续学习者。
