CSS3实现王者匹配时的粒子动画效果
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
在码代码的时候会发现,很多东西都是殊途同归的,方法千千万,能解决问题的都是好办法,不一定非要把代码写的特别高深,这样反而后来的人看不懂,维护根据头疼。
所以用最简单通俗的代码,更能利于后期的维护开发。
先来看看背景粒子动画效果预览图:
按钮点击粒子动画
由于按钮是梯形的,之前代码在button选择器上面已经加了伪类来实现梯形了,所以我们只能再套一层元素(button-text)来实现粒子。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | .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
选择器。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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,开始动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | .button-text.animate:before { display : block ; animation: topBubbles ease-in-out 0.75 s forwards; } .button-text.animate:after { display : block ; animation: bottomBubbles ease-in-out 0.75 s 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。
背景粒子效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .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 3 s forwards infinite; } |
这里我们改变一下粒子的大小,和透明度,以及层次(z-index)。让其一开始就执行动画,并且循环执行(infinite)。动画执行效果,我们直接用上面按钮的效果(topBubbles)即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要为大家详细介绍了CSS3实现粒子旋转伸缩加载动画的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-04-22
- 这篇文章主要介绍了CSS3实现大小不一的粒子旋转加载动画的相关资料,像是不断产生的气泡,显示加载进度,感兴趣的小伙伴们可以参考一下2016-04-21
最新评论