非常奈斯的jquery加载动画
3年前
超过1291天
温馨提示
本文最后更新于2021年05月22日，已超过1291天没有更新，若内容或图片失效，请留言反馈。
非常奈斯的jquery加载动画
html代码：
<div class="Loading-warp">
<div class="Loading">
<div class="Circle"></div>
<div class="Circle2"></div>
<div class="Circle3"></div>
</div>
</div>
css样式：
.Loading-warp {
width:100%;
height:100%;
background-color:#374140;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:10000;
}
.Loading-warp .Loading {
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:180px;
height:20px;
display:flex;
justify-content:space-between;
}
.Loading-warp .Loading .Circle,.Circle2,.Circle3 {
width:20px;
height:100%;
background-color:#FFFFFF;
border-radius:50%;
animation:bounce 1.5s infinite ease-in-out;
opacity:0;
}
@keyframes bounce {
0%,100% {
transform:scale(0);
opacity:0;
}
50% {
transform:scale(1.2);
opacity:1;
}
}.Loading-warp .Loading .Circle2 {
animation-delay:.25s;
}
.Loading-warp .Loading .Circle3 {
animation-delay:.5s;
}
js代码：
window.onload = function() {
$('.Loading-warp').delay(800).fadeOut('slow');
}
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
