在码代码的时候会发现,很多东西都是殊途同归的,方法千千万,能解决问题的都是好办法,不一定非要把代码写的特别高深,这样反而后来的人看不懂,维护根据头疼。
所以用最简单通俗的代码,更能利于后期的维护开发。
先来看看背景粒子动画效果预览图:
按钮点击粒子动画
由于按钮是梯形的,之前代码在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)即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。