這篇文章主要介紹css中l(wèi)oading動(dòng)畫是什么意思，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的定海網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

一：loading動(dòng)畫什么意思

很多人在打游戲的時(shí)候，會(huì)出現(xiàn)動(dòng)畫，這時(shí)就會(huì)表示加載，或者是網(wǎng)絡(luò)不通的時(shí)候緩沖，動(dòng)畫出現(xiàn)要么就是有游戲出現(xiàn)的環(huán)節(jié)，要么就是播放器出了問題。

二：幾個(gè)純CSS實(shí)現(xiàn)的loading動(dòng)畫

或者是因?yàn)榫W(wǎng)頁體積較大，又或者是由于使用vue一類的前端庫，瀏覽者在打開網(wǎng)頁時(shí)往往會(huì)出現(xiàn)一段時(shí)間的白屏，通常的做法是在網(wǎng)頁未完成首屏渲染時(shí)，向用戶展示一個(gè)loading動(dòng)畫，頁面渲染好了后再隱藏loading動(dòng)畫，下面我們就來為大家介紹幾款非常簡單的CSS動(dòng)畫，請看圖例。

首先第一種是最簡單的，HTML只需要一個(gè)標(biāo)簽，CSS也是寥寥幾行。簡單說一下思路：給一個(gè)元素設(shè)置寬高相等的數(shù)值，border-radius設(shè)置成50%使其變成一個(gè)圓形，將背景色設(shè)置為透明，給元素加上幾個(gè)像素的邊框，并配上自己喜歡的顏色，需要注意的是，這里要將其中一個(gè)邊的邊框設(shè)置為透明，使其看起來像是一個(gè)只有四分之三的圓環(huán)，然后為其設(shè)置動(dòng)畫，讓它動(dòng)起來就可以了。給一個(gè)定位元素設(shè)置transform:translate(-50%,-50%)，再配合top和left的50%，可以使元素水平和垂直居中。之所以將translate(-50%,-50%)寫在了form和to里面，是因?yàn)槿绻苯釉谠厣蠈?transform:translate(-50%,-50%)"，在動(dòng)畫里又寫"transform:rotate(0deg)"會(huì)覆蓋掉元素上的transform屬性而導(dǎo)致無法居中。

第二種思路是：構(gòu)造三個(gè)并排的圓，通過設(shè)置一定的動(dòng)畫延時(shí)來使得三個(gè)圓有此起彼伏的感覺，infinite表示動(dòng)畫無限次播放，alternate表示動(dòng)畫從頭到尾后再從尾到頭。

第三種對比前兩種稍顯復(fù)雜，這里使用了八個(gè)絕對定位的圓，用transform屬性將他們逐一從圓心移動(dòng)到邊上，兩兩之間與圓心之間的夾角是45度，所以通過rotate旋轉(zhuǎn)45度的倍數(shù)再向向X軸translate一定的距離，絕對定位的圓就規(guī)則的散開了（這里需要大家好好學(xué)習(xí)animation的各個(gè)屬性，以及多個(gè)屬性之間順序的不同對結(jié)果的影響）。然后給各個(gè)圓規(guī)則的設(shè)置動(dòng)畫延遲就可以了，這里的動(dòng)畫使用寬高的變化而不用scale，是因?yàn)閠ransform:scale()會(huì)覆蓋之前已經(jīng)設(shè)置的transform屬性而導(dǎo)致圓形沒有散開。

以上是“css中l(wèi)oading動(dòng)畫是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！