CSS加載動(dòng)畫(huà)

實(shí)現(xiàn)加載動(dòng)畫(huà)效果，需要的兩個(gè)關(guān)鍵步驟：

1、做出環(huán)形外觀

border:16px solid #f3f3f3;

border-radius:50%;

border-top:16px solid #2e8e9a;

2、使環(huán)形轉(zhuǎn)動(dòng) animation

動(dòng)畫(huà)的實(shí)現(xiàn)使用 animation，animation? 屬性用來(lái)指定一組或多組動(dòng)畫(huà)，每組之間用逗號(hào)相隔，animation是一個(gè)簡(jiǎn)寫(xiě)屬性。

每個(gè)動(dòng)畫(huà)定義中的屬性值的順序很重要：

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

第一個(gè)值被分配給 animation-duration(指定一個(gè)動(dòng)畫(huà)周期時(shí)長(zhǎng))，

第二個(gè)分配給 animation-delay(從動(dòng)畫(huà)應(yīng)用在元素上到動(dòng)畫(huà)開(kāi)始的這段時(shí)間的長(zhǎng)度)。

每個(gè)動(dòng)畫(huà)定義中的值的順序，對(duì)于區(qū)分 animation-name 值和其他關(guān)鍵字也很重要。

解析時(shí)，對(duì)于animation-name 之外的有效的關(guān)鍵字，必須被前面的簡(jiǎn)寫(xiě)中沒(méi)有找到值的屬性所接受。

此外，在序列化時(shí)，animation-name 與以及其他屬性值作區(qū)分等情況下，必須輸出其他屬性的默認(rèn)值。

例如：

animation:load 2s linear infinite;

上面簡(jiǎn)寫(xiě)代碼可以分解為：

animation-name 動(dòng)畫(huà)名稱(chēng)為 load；

animation-duration 一個(gè)動(dòng)畫(huà)周期時(shí)長(zhǎng)為 2s；

animation-timing-function? 在每一動(dòng)畫(huà)周期中執(zhí)行的節(jié)奏為 linear；

animation-timing-count 動(dòng)畫(huà)在結(jié)束前運(yùn)行的次數(shù)為 infinite(無(wú)限次數(shù))

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

HTML 代碼

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。