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);
       }
   };
}