更多

登录512收藏分享

CSS3中用background-image实现粒子动画效果

原创2019-04-03 12:05·web秀

前言

继续前几天的文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗？》，添加按钮、背景粒子动画效果。

其实在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。

所以用最简单通俗的代码，更能利于后期的维护开发。

ok！先来看看背景粒子动画效果预览图：

以下代码都是基于前一篇文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗？》的，所以没有了解的可以先去看看这篇文章。

按钮点击粒子动画

<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画出多个圆作为粒子。

transform: scale(0.9)，是鼠标点击时，缩放button-text元素。

大家应该都看到默认伪类元素是display: none;隐藏的。所有当我们点击时，需要添加一个选择器，让其显示出来，并执行动画。

js来监听点击事件，点击后添加animate选择器。

var animateButton = function(e) {  e.preventDefault;  e.target.classList.remove('animate');  e.target.classList.add('animate');  setTimeout(function(){  e.target.classList.remove('animate');  },700); };  var classname = document.getElementsByClassName("button-text"); for (var i = 0; i < classname.length; i++) {  classname[i].addEventListener('click', animateButton, false); }

然后我们添加CSS，开始动画

.button-text.animate:before {  display: block;  animation: topBubbles ease-in-out 0.75s forwards; } .button-text.animate:after {  display: block;  animation: bottomBubbles ease-in-out 0.75s forwards; } @keyframes topBubbles {  0% {  background-position:  5% 90%,  10% 90%,  10% 90%,  15% 90%,  25% 90%,  25% 90%,  40% 90%,  55% 90%,  70% 90%;  }  50% {  background-position:  0% 80%,  0% 20%,  10% 40%,  20% 0%,  30% 30%,  22% 50%,  50% 50%,  65% 20%,  90% 30%;  }  100% {  background-position:  0% 70%,  0% 10%,  10% 30%,  20% -10%,  30% 20%,  22% 40%,  50% 40%,  65% 10%,  90% 20%;  background-size:  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;  } } @keyframes bottomBubbles {  0% {  background-position:  10% -10%,  30% 10%,  55% -10%,  70% -10%,  85% -10%,  70% -10%,  70% 0%;  }  50% {  background-position:  0% 80%,  20% 80%,  45% 60%,  60% 100%,  75% 70%,  95% 60%,  105% 0%;  }  100% {  background-position:  0% 90%,  20% 90%,  45% 70%,  60% 110%,  75% 80%,  95% 70%,  110% 10%;  background-size:  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;  } }

我们通过background-position改变背景的位置，用background-size改变大小，来形成动画效果。

这样就形成按钮点击粒子动画效果了。

同理，我们可以在背景上面添加同样的粒子效果。代码基本可以copy。

背景粒子效果

.king:before {  position: absolute;  content: '';  display: block;  width: 100%;  height: 100%;  top: 0;  z-index: 1;  background-repeat: no-repeat;  opacity: 0.4; } .king:before {  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%,  12% 12%,  5% 5%,  12% 12%,  5% 5%,  10% 10%,  5% 5%,  10% 10%,  5% 5%;  display: block;  animation: topBubbles ease-in-out 3s forwards infinite; }

这里我们改变一下粒子的大小，和透明度，以及层次（z-index）。让其一开始就执行动画，并且循环执行（infinite）。动画执行效果，我们直接用上面按钮的效果（topBubbles）即可。