CSS实现一个粒子动效的按钮

原文连接
https://github.com/XboxYan/no...

按钮（button）多是网页中最多见的组件之一了，大部分都平淡无奇，若是你碰到的是一个这样的按钮，会不会忍不住多点几回呢？

一般这类效果第一反应可能就是借助canvas了，好比下面这个案例（建议去codepen原连接访问，segmentfault内置的预览js会加载失败）

效果就更加震撼了，固然canvas实现也有必定的门槛，并且实际使用起来也略微麻烦（全部js实现的通病），这里尝试一下CSS的实现方式。

生成粒子

抛开js方案，还有HTML和CSS实现方式。HTML就不用说了，直接写上大量的标签

<button>
    button
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</button>

通常状况下我不是很喜欢这种方式，标签太多，结构不美观，并且有可能对现有的页面形成其余影响（不少状况下并不方便修改原始HTML结构）

那么来看看CSS实现方式，主要也是两种方式，其实就是想一下有哪些属性能够无限叠加，一个是box-shadow，还有一个是background-image（CSS3支持无限叠加）。

1.box-shadow

咱们先看看box-shadow方式，为了不使用额外标签，这里采用伪元素生成。

.button::before{
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff0081;
  box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*无限叠加*/
}

效果仍是有的，主要就是多花点时间来调试，这里主要根据偏移量和扩展来决定粒子的位置和大小。

不过这里的偏移量只能是px单位，没法很好的自适应按钮的大小，因此这里采用第二种方式来实现

2.background-image

CSS3中background-image是能够无限叠加的，相似于

.myclass {
  background: background1, background2, /*...*/ backgroundN;
}

这里咱们能够采用径向渐变radial-gradient来实现多个小圆点。

.button::before{
  position: absolute;
  content: '';
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 0), 
  radial-gradient(circle, #ff0081 20%, transparent 0),
  radial-gradient(circle, #ff0081 20%, transparent 0), 
  radial-gradient(circle, #ff0081 20%, transparent 0), 
  ...;
  background-size: 10% 10%, 20% 20%, 15% 15%,...;
  background-position: 18% 40%, 20% 31%, 30% 30%,...;
}

这里主要经过background-size和background-position来控制原点的尺寸与位置，看着好像挺复杂，其实只要background-size和background-position与background-image位置一一对应就好了。实际开发中可能有点难调试，能够直接在控制台中经过键盘上下左右键微调实时预览效果（能够考虑作一个可视化工具）。

这样就作出了一个简单的粒子效果。

动起来

虽然background-image不支持CSS动画，可是另外两个background-size和background-position支持呀，因此，CSS transition和CSS animation均可以用起来。

动画效果很简单，就是粒子从中心往外扩散，而且逐渐消失的过程。

transition

咱们先看看:hover交互

.button::before{
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}
.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
}

固然直接这样设置确定是不理想，鼠标离开时会收缩回去，效果以下

咱们须要是鼠标离开时不收缩回去，如何实现呢？

很简单，把transition设置在:hover下就能够了，表示只有当鼠标通过时才有过渡，离开时没有

.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

这样是否是感受稍微好些了呢？点击这里查看。

若是咱们想作成点击的时候出现粒子动画该怎么作呢？这里就须要借助:active伪类了。

若是咱们按照:hover逻辑，那么

.button:active::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

很遗憾，只有当只有按住不动的时候才能触发，一旦鼠标抬起就没有了，这个时候咱们就须要换个角度了。能够这么想象一下，默认就是发散的，而后点击的时候聚拢，抬起的时候就会有还原成以前的发散状态，同时，在点击的时候须要取消掉过渡效果，以下

.button::before {
    /*...*/
    background-position: 5% 44%...;/*扩散的状态*/
    background-size: 0% 0%;
    transition: background-position .5s ease-in-out, background-size .75s ease-in-out;
}

.button:active::before {
  transition:0s;/**注意取消掉过渡**/
  background-size: 10% 10%, 20% 20%...;
  background-position: 18% 40%, 20% 31%,...;
}

你能够查看这个demo

为何在:active须要transition:0s呢，你能够试下不添加的效果就明白了，以下

animation

animation和transition实现原理比较相似，优势是能够作出更加精细的动画，这里就拿:active方式来讲吧。

.button::before{
  /*...*/
  animation: bubbles ease-in-out .75s forwards;
}
.button:active::before {
  animation: none; /*这里注意取消动画*/
  background-size: 0;
}
@keyframes bubbles {
  0% {
    background-position: 18% 40%, ...;
  }
  50% {
    background-position: 10% 44%, ...;
  }
  100% {
    background-position: 5% 44%, ...;
    background-size: 0% 0%;
  }
}

能够在这里查看源码。

惟一的不足多是初始化动画会自执行一次。

小结

上面介绍了纯CSS实现一个粒子动效的按钮，优势很明显，复制一下CSS直接扔到项目里就能用，管他什么原生项目仍是react项目，也无需绑定什么事件，也无需额外的逻辑处理，加强现有体验。试想一下，若是这是一个‘购买’按钮，会不会触发你多购买几回呢，反正我确定是会被吸引住了，哈~缺点也仍是有的，好比上面的定位，密密麻麻都是工做量啊，建议这些功能在项目总体完成以后再细细打磨，也能够试着作一些可视化工具来减轻工做量，完。