更多
登录512收藏分享
原创2019-04-03 12:05·web秀
继续前几天的文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗？》，添加按钮、背景粒子动画效果。
其实在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。
所以用最简单通俗的代码，更能利于后期的维护开发。
ok！先来看看背景粒子动画效果预览图：
以下代码都是基于前一篇文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗？》的，所以没有了解的可以先去看看这篇文章。
由于按钮是梯形的，之前代码在button选择器上面已经加了伪类来实现梯形了，所以我们只能再套一层元素（button-text）来实现粒子。
在button-text的伪类元素上面，添加background-image,并用径向渐变radial-gradient画出多个圆作为粒子。
transform: scale(0.9)，是鼠标点击时，缩放button-text元素。
大家应该都看到默认伪类元素是display: none;隐藏的。所有当我们点击时，需要添加一个选择器，让其显示出来，并执行动画。
js来监听点击事件，点击后添加animate选择器。
然后我们添加CSS，开始动画
我们通过background-position改变背景的位置，用background-size改变大小，来形成动画效果。
这样就形成按钮点击粒子动画效果了。
同理，我们可以在背景上面添加同样的粒子效果。代码基本可以copy。
这里我们改变一下粒子的大小，和透明度，以及层次（z-index）。让其一开始就执行动画，并且循环执行（infinite）。动画执行效果，我们直接用上面按钮的效果（topBubbles）即可。
