先说说直接放 loading gif图片的缺陷 ------
由于gif需要一定的内存，在PC端影响不大，当在移动端时，由于机子配置杂乱无章，可能在低配的时候存放页面的app直接蹦掉，所以被人建议使用css3 animation来制作loading图，不过这样会遇到兼容性问题，，，，然而我现在的项目不需要考虑兼容性，，所以 可以尽情使用css3
最主要是使用animation属性
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
...
</div>
.spinner{
width:70px;
height:60px;
text-align:center;
font-size:9px;
div{
background:yellowgreen;
height:100%;
width:6px;
display:inline-block;
animation:loading 1.0s infinite ease-in-out;
}
.rect1{animation-delay:0.1s;}
.rect2{animation-delay:0.2s;}
...
动画最主要讲究连贯性，动画需要无限执行，按相同的间隔进行延时，在keyframe中 不同时段改变动作
例子1
@keyframes loading{
0%,40%,100%,{transform:scaleY(0.4);}
20%{transform:scaleY(1.0);}
}
2.gif
例子2
@keyframes loading{
0%,40%,100%,{ transform:scaleX(0.4); }
20%{transform:scaleX(1.0);}
}
3.gif
例子3
@keyframes loading{
0%,40%,100%,{transform:rotate(0);}
20%{transform:rotate(10deg);}}
4.gif
圆形loading
.spinner{
text-align:center;
font-size:9px;
div{
background:yellowgreen;
height:25px;
width:25px;
border-radius:50%;
display:inline-block;
animation:loading 1.2s infinite ease-in-out;
}
.rect1{animation-delay:0.2s;}
.rect2{animation-delay:0.4s;}
.rect3{animation-delay:0.6s;}
}
@keyframes loading{
0%,100%,{transform:scale(0);}
40%{transform:scale(1.0);}
}
5.gif
文章版权属 饥人谷_陈慧敏 所有，转载务必注明出处
