css loading 圆圈,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}

}

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

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;

}

4:使用1,2原理可实现省略号效果的loading ,自身尝试吧!