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 代碼

總結

以上是生活随笔為你收集整理的css 加载动画如何生效,CSS 加载动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。