C3 -- 如何用静态loading.png实现loading动画

需求：用静态loading图（下图一）实现loading动画（下图二）

分析

1、方法一：最简单的方法是叫UI大大给一个gif图，或者自己动手利用ps帧动画制作一个gif图

2、方法二：利用css3的animation属性实现 （animation语法）

// html --> 页面上直接引入静态的png格式的loading图
<img src="../assets/img/loading.png" alt="loading">

// css  --> 给img设置样式让其转起来
img {
	 width: .7rem;
     height: .72rem;
     
     // 调用动画loadingRotate 
     animation:loadingRotate 1s infinite linear;
     -moz-animation:loadingRotate 1s infinite linear;      /* 兼容 Firefox */
     -webkit-animation:loadingRotate 1s infinite linear;   /* 兼容 Safari and Chrome */
     -o-animation:loadingRotate 1s infinite linear;        /* 兼容 Opera */
     
     // 定义动画loadingRotate 
     @keyframes loadingRotate {
        from {      // 动画开始状态
          transform: translate(-50%, -50%) rotate(0);
        }
        to {        // 动画结束状态
          transform: translate(-50%, -50%) rotate(360deg);
        }
     };
     @-webkit-keyframes loadingRotate {                      /* 兼容 Safari and Chrome */
       from {
         transform: translate(-50%, -50%) rotate(0);
       }
       to {
         transform: translate(-50%, -50%) rotate(360deg);
       }
     };
     @-moz-keyframes loadingRotate {                          /* 兼容 Firefox */
       from {
         transform: translate(-50%, -50%) rotate(0);
       }
       to {
         transform: translate(-50%, -50%) rotate(360deg);
       }
     };
     @-o-keyframes loadingRotate {                            /* 兼容 Opera */
       from {
         transform: translate(-50%, -50%) rotate(0);
       }
       to {
         transform: translate(-50%, -50%) rotate(360deg);
       }
   };
}