非常奈斯的jquery加载动画
3年前
超过1216天
温馨提示
本文最后更新于2021年05月22日，已超过1216天没有更新，若内容或图片失效，请留言反馈。
非常奈斯的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');
}
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
