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）即可。

留言