怎么实现hover_web前端CSS实现一个粒子动效的按钮

按钮(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方式&#