.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 下就可以了，表示只有当鼠标经过时才有过渡，离开时没有
