原文链接https://github.com/XboxYan/no...Button（按钮）可能是网页中最常见的组件之一，大部分都是平淡无奇的，如果你看到这样的按钮，是不是忍不住要多点几下呢？通常这种效果第一反应可能是用canvas，比如下面这个案例（建议访问codepen原链接，segmentfault内置的预览js会加载失败）。效果更加震撼。使用起来也有点麻烦（所有js实现的通病），所以这里试试CSS的实现。生成粒子不包括js方案，还包括HTML和CSS实现。HTML不用说了，写一大堆标签就可以了总的来说，我不是很喜欢这种方式。标签太多，结构不美观，还可能对现有页面造成其他影响（很多时候不方便修改原有的HTML结构）那么我们来看看CSS的实现方式。主要有两种方法。其实就是想着哪些属性可以无限叠加，一个是box-shadow，一个是background-image（CSS3支持无限叠加）。1.box-shadow先来看box-shadow方法。为了避免使用额外的标签，这里使用伪元素来生成。.button::before{位置：绝对；内容：'';宽度：5px；高度：5px；边界半径：50%；背景色：#ff0081；#ff0081,20px15px03px#ff0081,...;/*无限叠加*/}效果还是有的，主要是调试的时候多花点时间，这里主要根据确定粒子的位置和大小偏移和扩展。但是这里的偏移量只能以px为单位，不能很好的适配按钮的大小，所以这里采用第二种方式来实现2.background-imageCSS3中的background-image可以无限叠加，类似to.myclass{background:background1,background2,/*...*/backgroundN;}这里我们可以使用radial-gradient来实现多个小圆点。.button::before{位置：绝对；内容：'';左：-2em；右：-2em；顶部：-2em；底部：-2em；指针事件：无；-图像：径向渐变（圆形，#ff008120%，透明0），径向渐变（圆形，#ff008120%，透明0），径向渐变（圆形，#ff008120%，透明0），径向-渐变（圆形，#ff008120%，透明0），...；背景大小：10%10%、20%20%、15%15%、...；background-position:18%40%,20%31%,30%30%,...;}这里原点的大小和位置主要由background-size和background-position控制。看似复杂，其实只是background-size和background-position和background-imagepositions是一一对应的。实际开发中调试起来可能有点困难。可以直接在控制台通过键盘的上下左右键微调实时预览效果（可以考虑做一个可视化工具）。这产生了一个简单的粒子效果。虽然background-image不支持CSS动画，但是另外两个background-size和background-position是支持的。因此，CSStransition和CSSanimation都可以使用。动画效果很简单，就是粒子从中心向外扩散，逐渐消失的过程。我们来看看transition:hoverinteraction.button::before{transition:.75sbackground-positionease-in-out,75sbackground-sizeease-in-out;}.button:hover::before{background-position:5%44%,-5%20%,7%5%...;background-size:0%0%;}当然直接这样设置肯定不理想。当老鼠离开时，它会缩回去。效果如下。我们需要怎样防止老鼠离开了就缩回去呢？很简单，把transition设置在:hover下就可以了，也就是说只有鼠标经过的时候有transition，没有.button:hover::before{background-position:5%44%,-5%20%,7%5%...;背景大小：0%0%；transition:.75sbackground-positionease-in-out,75sbackground-sizeease-in-out;}这样是不是感觉好一点了？点击此处查看。如果我们想让点击时出现粒子动画怎么办？这里需要用到:active伪类。如果我们遵循:hover逻辑，那么.button:active::before{background-position:5%44%,-5%20%,7%5%...;背景大小：0%0%；transition:.75sbackground-positionease-in-out,75sbackground-sizeease-in-out;}遗憾的是只能在鼠标按住时触发，一旦鼠标抬起就会消失。这时候，我们就需要换个角度。你可以这样想象，默认是发散的，然后点击的时候聚拢，抬起来又回到之前发散的状态。同时需要取消点击时的过渡效果，如下。button::before{/*...*/background-position:5%44%...;/*扩散状态*/background-size:0%0%;transition:background-position.5sease-in-out,background-size.75sease-in-out;}.button:active::before{transition:0s;/**注意取消过渡**/background-大小：10%10%,20%20%...;background-position:18%40%,20%31%,...;}可以查看这个demo为什么:active中需要transition:0s，不加可以试试看效果，如下动画动画和transition实现原理是类似的，优点是可以制作细节更丰富的动画。让我们在这里使用:active方法。.button::before{/*...*/animation:bubblesease-in-out.75sforwards;}.button:active::before{animation:none;/*这里注意取消动画*/background-size:0;}@keyframesbubbles{0%{background-position:18%40%,...;}50%{背景位置:10%44%,...;}100%{背景位置:5%44%,...;背景大小：0%0%；}}您可以在此处查看源代码。唯一的缺点可能是初始化动画会自行执行一次。总结以上介绍了纯CSS实现一个粒子动画按钮。优势显而易见。只需要复制CSS，直接丢到项目中使用即可。无论是什么native项目或者react项目，都不需要绑定任何事件或者额外的逻辑处理来提升已有的体验。试想一下，如果这是一个“购买”按钮，它会触发你购买更多次吗？反正我是肯定会被吸引的，哈~还有一些不足，比如上面的定位，密密麻麻的工作量，建议等项目整体完成后再打磨这些功能，也可以试试制作一些可视化工具来减少工作量。
