由于按钮是梯形，之前的代码中已经在按钮选择器中添加了一个伪类来实现梯形，所以我们只能再添加一层元素（button-text）来实现粒子。.button-text{位置：相对；宽度：100%；边界半径：4px；边框：无；cursor:pointer;}.button-text:before,.button-text:after{position:absolute;内容：'';显示：块；宽度：140%；高度：100%；左：-20%；z指数：-1000；background-repeat:no-repeat;}.button-text:before{display:none;顶部：-75%；背景图像：径向渐变（圆形，#fff20%，透明20%），径向渐变（圆形，透明20%，#fff20%，透明30%），径向渐变（圆形，#fff20%,透明20%),径向渐变(圆,#fff20%,透明20%),径向渐变(圆,透明10%,#fff15%,透明20%),径向渐变(圆,#fff20%,transparent20%),radial-gradient(circle,#fff20%,transparent20%),radial-gradient(circle,#fff20%,transparent20%),径向渐变(circle,#fff20%),透明20%);背景大小：10%10%,20%20%,15%15%,20%20%,18%18%,10%10%,15%15%,10%10%,18%18%;}.button-text:after{display:none;底部：-75%；背景图像：径向渐变（圆形，#fff20%，透明20%），径向渐变（圆形，#fff20%，透明20%），径向渐变（圆形，透明10%，#fff15%）,透明20%),径向渐变(圆,#fff20%,透明20%),径向渐变(圆,#fff20%,透明20%),径向渐变(圆,#fff20%,透明20%),radial-gradient(circle,#fff20%,transparent20%);背景大小:15%15%,20%20%,18%18%,20%20%,15%15%,10%10%,20%20%;}.button-text:active{transform:scale(0.9);}在button-text伪类元素上方添加background-image，使用radial-gradient绘制多个圆作为粒子变换：scale(0.9)，鼠标点击时缩放button-text元素。大家应该看到默认的伪类元素是display:none;隐。我们需要做的就是添加一个选择器，使其显示出来，并在我们单击时进行动画处理。js监听点击事件，点击后添加动画选择器。varanimateButton=function(e){e.preventDefault;e.target.classList.remove('动画');e.target.classList.add('动画');setTimeout(function(){e.target.classList.remove('animate');},700);};varclassname=document.getElementsByClassName("button-text");for(vari=0;i