優雅的寫個加載動畫

納尼 爲何要加載動畫 ？

用戶在進行某些操做時，都要從服務器獲取資源，這個過程都須要時間，爲了減小用戶等待中產生的焦慮與不安，咱們應該在合理的時間內作出合理的安撫，告訴用戶他的操做是有迴應的，因此一個優雅的加載可的方式也能夠作的很是有趣，讓用戶輕鬆自在的享受等待。

下面我來們看個案例：

通過一場址皮產品經理終於妥協了，效果圖以下：

又一次靈魂對白：

UI小妹跟前端小哥一頓亂溝通，最終確認效果以下：

好了，咱們言歸正轉，不扯那些有的沒的了，接來就交給html5,css3 去實現了。

我先將主要的css3屬性列出來

position 定位是跑不了的 animation css動畫 @keyframes 楨 transform 變換

• 以上屬性有不明白的，能夠上菜鳥教程自行查看 ~_~

接下來全方位爲你解析：

同心圓加載動畫

先來解析一下結構
複製代碼

這個時候有人就會問，一個結構怎麼畫出兩個圓？
複製代碼

before after

看到這兩個應該熟悉了吧，咱們利用這兩個僞類選器，在....以前，在....以後。
複製代碼

只畫了外圓的細節圖，內圓的細節跟幾乎是同樣的，只不是內圓他是一開始就放大，外圓是一開始縮小，這個他們就錯開了方向。
複製代碼

環球旋轉360度動畫

這個相對來講比較簡單一些，同理先說結構，他的結構也只有一個，他有兩個形狀，在這裏不須要僞類選器。
複製代碼

結構思路：

利用邊框實現效果，邊框分爲四條邊，只要一條邊顏色跟其它邊框顏色不同就能夠實現。
複製代碼

這個旋轉的動畫就比較簡單了。
複製代碼

小球碰撞動畫

通過前面兩個加載動畫的薰陶，應該對接下來的動畫有點思路了吧，說難也不難，只要理解他的一個思路去計算就不復雜了。
這個碰撞動畫我會分爲幾個步驟來解析。

首先來看一下結構

複製代碼

四個小球都須要一個載體來肯定他們的定位，每一個小球都有共同的樣式，因此給他們一個共同的類名item
先肯定定位 position
複製代碼

初始化結構

初始化位置

由於咱們是交替運行的，因此要把四個小球先散開, 再把動畫名稱加上
複製代碼

關鍵楨

想要動畫運行起來關鍵楨，是關鍵，首先咱們來解析球的運行軌跡。
複製代碼

0% {  }  100% {  }
百分比來規定變化發生的時間，0% 是動畫的開始，100% 是動畫的完成。
如上圖所示：0% 咱們作了什麼事情 100% 咱們作了什麼事情

200% -200% 一負一正 我這裏解釋一下：
正數表示物體往右或往下移動，負數表示物體往左或往上移動
複製代碼

到這裏已經結束了

有人會問，樓主怎麼不把代碼貼出來？

嘿嘿 就是了防止那些直接拷代碼的人。