CSS 各种loading 实现
CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，对自己做个总结吧……
1:loading 简单实现(圆形闪烁)
.load{
width: 40px;
height: 40px;
border-radius: 50px;
background: red;
animation: fadeOut 1.0s infinite ease-in-out;
-webkit-animation: fadeOut 1.0s infinite ease-in-out;
}
@keyframes fadeOut {
from{transform: scale(0.0)}
to{transform: scale(1.0);opacity: 0}
}
@-webkit-keyframes fadeOut{
from{transform: scale(0.0)}
to{transform: scale(1.0);opacity: 0}
}
<div class="load"></div>
2:线条波动效果
代码实现:(主要依赖 : animation-delay)
.box .lineload >div{
width: 3px;
height: 50px;
background: green;
animation: strechdeley 1.2s infinite ease-in-out;
-webkit-animation: strechdeley 1.2s infinite ease-in-out;;
margin-left: 3px;
}
.box .lineload .line1{
animation-delay: -1.1s;
}
.box .lineload .line2{
animation-delay: -1s;
}
.box .lineload .line3{
animation-delay: -0.9s;
}
.box .lineload .line4{
animation-delay: -0.8s;
}
.box .lineload .line5{
animation-delay: -0.7s;
}
@keyframes strechdeley{
0%,40%,100%{
transform: scale(0.4);
}
20%{
transform: scale(1.0);
}
}
@-webkit-keyframes strechdeley{
0%,40%,100%{
-webkit-transform: scale(0.4);
}
20%{
-webkit-transform: scale(1.0);
}
html
<div class="lineload">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>
3:圆环loading 旋转动画
@keyframes am-ringload {
from { transform: rotate(0deg)}
to{ transform: rotate(360deg)}
}
@-webkit-keyframes am-ringload {
from { -webkit-transform: rotate(0deg)}
to{ -webkit-transform: rotate(360deg)}
}
.box .ringload {
width: 60px;
height: 60px;
background: black;
border: 5px solid #666666;
border-left-color:#ffffff ;
margin-left: 50px;
border-radius: 50%;
animation: am-ringload 1s infinite ease;
-webkit-animation: am-ringload 1s infinite ease;
}
<div class="ringload">
</div>
4:使用1,2原理可实现省略号效果的loading ,自身尝试吧!
