脚本宝典收集整理的这篇文章主要介绍了CSS3实现王者匹配时的粒子动画效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在码代码的时候会发现,很多东西都是殊途同归的,方法千千万,能解决问题的都是好办法,不一定非要把代码写的特别高深,这样反而后来的人看不懂,维护根据头疼。
所以用最简单通俗的代码,更能利于后期的维护开发。
先来看看背景粒子动画效果预览图:
按钮点击粒子动画
<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;
隐藏的。所有当我们点击时,需要添加一个选择器,让其显示出来,并执行动画。
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)即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的CSS3实现王者匹配时的粒子动画效果全部内容,希望文章能够帮你解决CSS3实现王者匹配时的粒子动画效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。