loading動畫什麼意思？幾個純CSS實作的loading動畫

這篇文章帶給大家的內容是關於 loading動畫什麼意思？幾個純CSS實現的loading動畫，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一： loading動畫什麼意思

很多人在打遊戲的時候，會出現動畫，這時就會表示加載，或者是網絡不通的時候緩衝，動畫出現要嘛就是有遊戲出現的環節，要嘛就是播放器出了問題。 【推薦閱讀：loading動畫大全】

二：幾個純CSS實作的loading動畫

或是因為網頁體積較大，又或者是由於使用vue一類的前端庫，瀏覽者在打開網頁時往往會出現一段時間的白屏，通常的做法是在網頁未完成首屏渲染時，向用戶展示一個loading動畫，頁面渲染好了後再隱藏loading動畫，下面我們就來為大家介紹幾款非常簡單的CSS動畫，請看圖例。

首先第一種是最簡單的，HTML只需要一個標籤，CSS也是寥寥幾行。簡單說一下想法：給一個元素設定寬高相等的數值，border-radius設定成50%使其變成一個圓形，將背景色設定為透明，給元素加上幾個像素的邊框，並配上自己喜歡的顏色，需要注意的是，這裡要將其中一個邊的邊框設置為透明，使其看起來像是一個只有四分之三的圓環，然後為其設置動畫，讓它動起來就可以了。給一個定位元素設定transform:translate(-50%, -50%)，再配合top和left的50%，可以讓元素水平和垂直居中。之所以將translate(-50%, -50%)寫在了form和to裡面，是因為如果直接在元素上寫"transform:translate(-50%, -50%)"，在動畫裡又寫" transform: rotate(0deg)"會覆寫元素上的transform屬性而導致無法居中。

第二種想法是：建構三個並排的圓，透過設定一定的動畫延時來使得三個圓有此起彼落的感覺，infinite表示動畫無限次播放，alternate表示動畫從頭到尾再從尾到頭。

第三種對比前兩種稍微複雜，這裡使用了八個絕對定位的圓，用transform屬性將他們逐一從圓心移動到邊上，兩兩之間與圓心之間的夾角是45度，所以透過rotate旋轉45度的倍數再向向X軸translate一定的距離，絕對定位的圓就規則的散開了（這裡需要大家好好學習animation的各個屬性，以及多個屬性之間順序的不同對結果的影響）。然後給各個圓規則的設定動畫延遲就可以了，這裡的動畫使用寬高的變化而不用scale，是因為transform:scale()會覆蓋先前已經設定的transform屬性而導致圓形沒有散開。

以上就是對 loading動畫什麼意思？幾個純CSS實現的loading動畫的全部介紹，如果您想了解更多有關CSS3教程，請關注PHP中文網。

以上是loading動畫什麼意思？幾個純CSS實作的loading動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！