CSS3实现10种Loading效果
7 浏览量
2021-01-21
14:03:21
上传
评论
收藏 47KB PDF 举报
CSS3实现实现10种种Loading效果效果
用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……
第第1种效果：种效果：
代码如下：
XML/HTML Code复制内容到剪贴板
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS Code复制内容到剪贴板
.loading{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.8s;
}
评论0
最新资源