Loading加载动画效果

HTML代码:

<div class="Loading">
<div class="Loading-warp">
<div class="color">zt</div>
<div class="Thread"></div>
</div>
</div>​

CSS代码:

* {
padding:0;
margin:0;
list-style:none;
text-decoration:none;
}
.Loading {
width:100%;
height:100vh;
background-color:#5f5f5f;
position:fixed;
top:0;
left:0;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
/* display:none;
*/
}
.Loading-warp .color {
width:60px;
height:60px;
background:#D55921;
border-radius:15px;
margin:auto;
margin-bottom:35px;
color:#fff;
font-size:40px;
display:flex;
justify-content:center;
align-items:center;
animation:color 1.5s infinite ease;
transform:rotate(0deg);
}
.Loading-warp .Thread {
width:150px;
height:3px;
background-color:#cfcfcf;
position:relative;
overflow:hidden;
}
.Loading-warp .Thread:hover::after {
left:75%;
}
.Loading-warp .Thread::after {
content:"";
position:absolute;
left:-25%;
top:0;
width:50%;
height:100%;
background:firebrick;
animation:Loading 1.5s infinite ease;
}
@keyframes color {
0% {
background:firebrick;
transform:rotate(-360deg);
}
50% {
background:#D55921;
transform:rotate(0deg);
}
100% {
background:firebrick;
transform:rotate(-360deg);
}
}@keyframes Loading {
0% {
left:-25%;
background:firebrick;
}
50% {
left:75%;
background:#D55921;
}
100% {
left:-25%;
background:firebrick;
}
}​

js代码:

$('.Loading').delay(5000).fadeOut('slow');​

 

© 版权声明
1:本网站名称:源码库
2:本站永久网址:www.ymkuz.com
3:本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
4:分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
5:本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
6:本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7:如有链接无法下载、失效或广告,请联系管理员处理!
8:文章投稿-投诉建议E-mail:yunduanw@qq.com 站长QQ:99767152
THE END
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容