css3 transform與animation妙用

transtion與animation為css3新增的屬性，主要用來實現一些動畫效果

transtion屬性向元素應用2D或3D轉換，允許我們對元素進行旋轉、縮放、移動或傾斜

animation動畫有三個基本要素：

1、告訴系統需要執行哪個動畫。

2、自己建立一個所需的動畫

3、告訴系統需要執行動畫的時長

例子：純CSS3波浪載入效果

以下為效果程式碼

   
    

    

    

    

        
50%
    

思路分析，我們要實現一個有波浪的載入效果，首先需要製作曲線，再讓曲線以波浪的形式滾動起來。曲線可以透過canvas製作，但是那樣相對較複雜，在這裡我們透過border-radius的方式取巧製作。

但是得到的類圓形的曲線，如圖黃色內部的曲線才是我們想要的

在得到波浪後，將放大的類圓形背景色改為與白色。再新建一個同樣的類圓形，透過使用rgba的方式，設定一定的透明的可以形成第二層的遠處波浪，增加真實感。

再來只要新增一層用來顯示載入進度的div就可以了