在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。
所以用最简单通俗的代码，更能利于后期的维护开发。
先来看看背景粒子动画效果预览图：
按钮点击粒子动画
<div class="button">
<div class="button-text">确认</div>
</div>
由于按钮是梯形的，之前代码在button选择器上面已经加了伪类来实现梯形了，所以我们只能再套一层元素（button-text）来实现粒子。
.button-text {
position: relative;
width: 100%;
border-radius: 4px;
border: none;
cursor: pointer;
}
.button-text:before,
.button-text:after {
position: absolute;
content: '';
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: -1000;
background-repeat: no-repeat;
}
.button-text:before {
display: none;
top: -75%;
background-image:
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%);
background-size:
10% 10%,
20% 20%,
15% 15%,
20% 20%,
18% 18%,
10% 10%,
15% 15%,
10% 10%,
18% 18%;
}
.button-text:after {
display: none;
bottom: -75%;
background-image:
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%);
background-size:
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
