css3中l(wèi)oading指的什么意思

這篇文章將為大家詳細(xì)講解有關(guān)css3中l(wèi)oading指的什么意思，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

css3 loading指的是css3實(shí)現(xiàn)正在加載、緩沖的效果，其css實(shí)現(xiàn)loading的方法：1、通過transform屬性實(shí)現(xiàn)loading；2、通過animation-direction屬性實(shí)現(xiàn)loading等等。

css3 loading動(dòng)畫是什么意思？

loading動(dòng)畫表示正在加載、緩沖的意思。

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

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

幾個(gè)純CSS實(shí)現(xiàn)的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)槿绻苯釉谠厣蠈?quot;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)致圓形沒有散開。

關(guān)于“css3中l(wèi)oading指的什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。