极乐门资源网 Design By www.ioogu.com
在码代码的时候会发现,很多东西都是殊途同归的,方法千千万,能解决问题的都是好办法,不一定非要把代码写的特别高深,这样反而后来的人看不懂,维护根据头疼。
所以用最简单通俗的代码,更能利于后期的维护开发。
先来看看背景粒子动画效果预览图:
按钮点击粒子动画
<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)即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
CSS3,王者匹配,粒子动画
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无CSS3实现王者匹配时的粒子动画效果的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]