因为自身企业商品里头，有个按钮在点一下以后，会有1两秒的等候時间（寄验证信），因而以便防止点一下后1两秒的载入時间空窗，就做个loading动漫来强化应用者体验，本来想说立即用张gif来处理，但又想借着这个机遇练功，就应用了CSS的渐变色实际效果来达到，想不到实际效果还满好的，并且不必须附加提升div之类的元素，单纯性改动CSS和再加点一下恶性事件就进行了。
实际效果演试
先看来1下进行的实际效果。
完成全过程
这个实际效果实际上很非常容易，先看来1下本来的按钮相貌，就只是个div套用CSS罢了。
HTML：
<div class="btn">click me</div>
CSS：
.btn{
position:relative;
width:200px;
height:30px;
line-height:30px;
text-align:center;
border-radius:3px;
background:#5ad;
color:#fff;
cursor:pointer;
}
相貌就会是这样（就只是很简易的CSS）：
那末要如何在上面盖上动漫呢？这时候候就要运用CSS的伪元素，在上方盖上1个before伪元素，把动漫放在这个伪元素内便可。
CSS：
.btn::before{
content:"loading";
position:absolute;
width:200px;
height:30px;
line-height:30px;
text-align:center;
border-radius:3px;
z-index:2;
top:0;
left:0;
color:#fff;
text-shadow:rgba(100,0,0,1) 0 0 3px;
background:#c00;
}
套上before以后，就会发现本来的被遮盖了。
掌握基本原理后，再来便是把before的情况改为动漫，这里用到两个CSS3的技能，第1个是渐变色色的情况，第2个是动漫，第1个渐变色色较为繁杂些，关键便是让渐变色以45度的方法填充，內容是两种色调相互之间配搭，但务必相互配合background-size，让渐变色可以圆满地接在1起，这边一般是要调剂最久的地区。
background:linear-gradient(45deg,#fc0 0%,#fc0 20%,#fa0 20%, #fa0 45%,#fc0 45%,#fc0 70%,#fa0 70%, #fa0 95%,#fc0 95%,#fc0 100%); background-size:30px 30px; background-position:0 0;
从下图能够看到，假如沒有1步步伐整，出来的相貌将会就会没接好，调剂进行的就会接得很畅顺。
进行以后便是要套用CSS3的动漫实际效果，让background-position更改，情况就会全自动转变了。
animation:click 1s infinite linear;
@keyframes click {
0%{
background-position:0 0;
}
100%{
background-position:30px 0;
}
}
到这边实际上进行了百分之810了，最终1步便是要再加点一下的恶性事件，这里我的作法是先把不久的伪元素用display:none掩藏起来，接着新增1个class名为click，当点一下按钮的情况下，按钮就会套用click的class，伪元素就会出現了，下列是详细的编码，但是有做了些简化，和让点一下2秒以后，按钮会修复原样。
CSS：
.btn,.btn::before{
width:200px;
height:30px;
line-height:30px;
text-align:center;
border-radius:3px;
}
.btn{
position:relative;
background:#5ad;
color:#fff;
cursor:pointer;
}
.btn::before{
content:"loading";
position:absolute;
display:none;
z-index:2;
top:0;
left:0;
color:#fff;
text-shadow:rgba(100,0,0,1) 0 0 3px;
background:linear-gradient(45deg,#fc0 0%,#fc0 20%,#fa0 20%, #fa0 45%,#fc0 45%,#fc0 70%,#fa0 70%, #fa0 95%,#fc0 95%,#fc0 100%);
background-size:30px 30px;
background-position:0 0;
animation:click 1s infinite linear;
}
.btn.click::before{
display:block;
}
@keyframes click {
0%{
background-position:0 0;
}
100%{
background-position:30px 0;
}
}
jquery：
$(function(){
var timer;
$('.btn').on('click',function(){
$('.btn').addClass('click');
clearTimeout(timer);
timer = setTimeout(function(){
$('.btn').removeClass('click');
},2000);
});
});
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 小程序和公众号区别_小程序生成二维码_小程序前端框架_小程序开发商排名_小程序码 版权所有 （网站地图） 粤ICP备10235580号