loading CSS动画

先说说直接放 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

文章版权属 饥人谷_陈慧敏 所有，转载务必注明出处