CSS 加載動畫

CSS加載動畫

實現加載動畫效果，需要的兩個關鍵步驟：

1、做出環形外觀

border:16px solid #f3f3f3;
 border-radius:50%;
 border-top:16px solid #2e8e9a;

2、使環形轉動 animation

　　動畫的實現使用 animation，animation  屬性用來指定一組或多組動畫，每組之間用逗號相隔，animation是一個簡寫屬性。

每個動畫定義中的屬性值的順序很重要：

可以被解析為 時間的值，單位毫秒 ms：

第一個值被分配給 animation-duration（指定一個動畫周期時長），

第二個分配給 animation-delay（從動畫應用在元素上到動畫開始的這段時間的長度）。

每個動畫定義中的值的順序，對於區分 animation-name 值和其他關鍵字也很重要。

解析時，對於animation-name 之外的有效的關鍵字，必須被前面的簡寫中沒有找到值的屬性所接受。

此外，在序列化時，animation-name 與以及其他屬性值作區分等情況下，必須輸出其他屬性的默認值。

例如：

animation:load 2s linear infinite;

上面簡寫代碼可以分解為：

　　animation-name 動畫名稱為 load；

　　animation-duration 一個動畫周期時長為 2s；

　　animation-timing-function  在每一動畫周期中執行的節奏為 linear；

　　animation-timing-count  動畫在結束前運行的次數為 infinite（無限次數）

注意：使用廠商前綴 -webkit 或是-ms- 用於不支持 animation 和 transform 屬性的瀏覽器。

HTML 代碼

<div class='loader'></div>

CSS代碼

.loader{
            border:16px solid #f3f3f3;
            border-radius:50%;
            border-top:16px solid #2e8e9a;
            width:100px;
            height:100px;
            /* animation-name:load; */
            animation:load 2s linear infinite;
        }
        @keyframes load{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }

實現效果：

其他加載動畫樣式

主要是依靠變換邊框的顏色

CSS代碼

 .loader{
            border:16px solid #f3f3f3;
            border-color:#00ffff #00ccff #0099ff #0066ff;
            border-radius: 50%;
            width:100px;
            height:100px;
            animation:load 2s linear infinite;
        }
        @keyframes load{
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }

實現效果：

 

 

---

參考資料：

https://www.runoob.com/css/css-examples.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations