整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
loading效果在實(shí)際開(kāi)發(fā)中是很常見(jiàn)的，尤其是在Ajax請(qǐng)求的時(shí)候，可以給用戶一個(gè)很好的交互體驗(yàn)。
今天這篇文章我們一起來(lái)看看如何通過(guò)CSS3實(shí)現(xiàn)各種不同的loading效果吧，文章中的代碼可以從github自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html
CSS3
首先我們來(lái)看看需要實(shí)現(xiàn)的效果。
效果圖
然后我們一個(gè)個(gè)來(lái)看都是怎么實(shí)現(xiàn)的吧。
loadingA的效果就如音樂(lè)播放時(shí)的動(dòng)態(tài)條一般，不停的連續(xù)執(zhí)行。
其主要實(shí)現(xiàn)思路如下：
每個(gè)豎狀條都是一個(gè)簡(jiǎn)單的div，div為一個(gè)小的圓形。
給每個(gè)div加上一個(gè)動(dòng)畫(huà)效果，該動(dòng)畫(huà)的效果是高度逐漸變長(zhǎng)，最后再變回原樣。
每個(gè)div延遲不同的時(shí)間才開(kāi)始執(zhí)行，這樣就會(huì)有先后的層次感。
然后我們來(lái)看看各個(gè)部分的代碼實(shí)現(xiàn)。
基本的div元素
基本的div元素是一個(gè)小的圓形。
基本的div元素
定義動(dòng)畫(huà)
定義的動(dòng)畫(huà)主要是改變div的高度，在完成50%的時(shí)候達(dá)到最高值，完成100%時(shí)恢復(fù)到原來(lái)高度。
動(dòng)畫(huà)效果
設(shè)置動(dòng)畫(huà)
將定義的動(dòng)畫(huà)添加至animation屬性，設(shè)置一個(gè)動(dòng)畫(huà)總執(zhí)行時(shí)間，然后給5個(gè)div設(shè)置不同的延時(shí)時(shí)間。
設(shè)置動(dòng)畫(huà)
HTML元素
將以上設(shè)置的CSS屬性都添加至HTML元素中。
HTML元素
將以上代碼寫(xiě)完后，直接在瀏覽器運(yùn)行就可以看到如loadingA的效果了。
如果細(xì)心的看完loadingA的實(shí)現(xiàn)過(guò)程，一定可以聯(lián)想到loadingB的實(shí)現(xiàn)。
loadingA是通過(guò)給高度加動(dòng)畫(huà)，那么loadingB就是通過(guò)給寬度加動(dòng)畫(huà)，同樣給5個(gè)div不同的延遲時(shí)間。
這里我只給出其動(dòng)畫(huà)定義，其他的內(nèi)容與loadingA類似，詳細(xì)的內(nèi)容可以通過(guò)github去看。
loadingB動(dòng)畫(huà)
loadingC的實(shí)現(xiàn)效果如下。
loadingC
在loadingA和loadingB中是通過(guò)給高度和寬度增加動(dòng)畫(huà)實(shí)現(xiàn)的，而loadingC是通過(guò)給五個(gè)div增加縱向位移實(shí)現(xiàn)的。
loadingC實(shí)現(xiàn)的關(guān)鍵點(diǎn)就在于translateY的使用，因?yàn)閯?dòng)畫(huà)是從下往上跳動(dòng)，所以在完成度50%時(shí)，translateY設(shè)定為負(fù)值。
其定義的動(dòng)畫(huà)部分代碼如下所示。
定義動(dòng)畫(huà)
loadingD的實(shí)現(xiàn)效果如下。
loadingD效果
通過(guò)效果圖我們發(fā)現(xiàn)有兩點(diǎn)差異：
loading過(guò)程中透明度會(huì)發(fā)生變化，這個(gè)通過(guò)opacity實(shí)現(xiàn)。
在接近完成時(shí)有個(gè)上下輕微抖動(dòng)的效果，這個(gè)通過(guò)設(shè)置小單位的正負(fù)translateY值。
得到的動(dòng)畫(huà)代碼如下。
loadingD動(dòng)畫(huà)
loadingE的動(dòng)畫(huà)效果如下。
loadingE
loadingE的效果同loadingD類似，loadingD是通過(guò)縱向的位移變換，可以通過(guò)translateY實(shí)現(xiàn)。
loadingE是通過(guò)水平方向位移變換，可以通過(guò)translateX來(lái)實(shí)現(xiàn)。
而有一點(diǎn)不同的是，loadingE的div初始位置就是translateX(-300px)，表示從左側(cè)開(kāi)始運(yùn)動(dòng)。
loadingE動(dòng)畫(huà)
loadingF定義的動(dòng)畫(huà)如下所示。
loadingF
loadingF是旋轉(zhuǎn)效果，可以很容易想到是通過(guò)rotate實(shí)現(xiàn)。
loadingF中只有一個(gè)div，邊框設(shè)置為虛線即可，其CSS樣式如下。
loadingF基本樣式
其定義的動(dòng)畫(huà)樣式如下。
loadingF定義動(dòng)畫(huà)
loadingG與loadingH的動(dòng)畫(huà)效果如下。
loadingG&loadingH
loadingG與loadingH類似，loadingH在loadingG的基礎(chǔ)上增加了幾個(gè)點(diǎn)。
loadingG中是通過(guò)設(shè)置一個(gè)縱向的div-1，在該div-1內(nèi)增加一個(gè)div-2，div-2就是轉(zhuǎn)動(dòng)的圓點(diǎn)，div-2通過(guò)絕對(duì)定位計(jì)算出實(shí)際位置，當(dāng)div-1大小變化時(shí)，div-2也應(yīng)該重新計(jì)算位置。
div-2的CSS代碼如下所示。
loadingG基本樣式
在loadingH中，div-1內(nèi)有四個(gè)div，分別表示轉(zhuǎn)動(dòng)的四個(gè)圓點(diǎn)，也是通過(guò)絕對(duì)定位計(jì)算偏移位置。
最后設(shè)置動(dòng)畫(huà)，只需要讓div-1在一個(gè)動(dòng)畫(huà)周期內(nèi)旋轉(zhuǎn)360度即可。
loadingG
loadingI的效果圖如下所示。
loadingI
loadingI的動(dòng)畫(huà)主要涉及到放大縮小和旋轉(zhuǎn)兩個(gè)方面，放大縮小通過(guò)scale實(shí)現(xiàn)，旋轉(zhuǎn)通過(guò)rotate實(shí)現(xiàn)。具體的可以看看github上的完整代碼。
今天這篇文章主要是教大家如何使用CSS3的動(dòng)畫(huà)特性去實(shí)現(xiàn)loading效果，完全可以不用借助于第三方庫(kù)，大家也動(dòng)動(dòng)手自己實(shí)現(xiàn)一下吧。
loading效果在實(shí)際開(kāi)發(fā)中是很常見(jiàn)的，尤其是在Ajax請(qǐng)求的時(shí)候，可以給用戶一個(gè)很好的交互體驗(yàn)。
今天這篇文章我們一起來(lái)看看如何通過(guò)CSS3實(shí)現(xiàn)各種不同的loading效果吧，文章中的代碼可以從github自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html
CSS3
首先我們來(lái)看看需要實(shí)現(xiàn)的效果。
效果圖
然后我們一個(gè)個(gè)來(lái)看都是怎么實(shí)現(xiàn)的吧。
loadingA的效果就如音樂(lè)播放時(shí)的動(dòng)態(tài)條一般，不停的連續(xù)執(zhí)行。
其主要實(shí)現(xiàn)思路如下：
每個(gè)豎狀條都是一個(gè)簡(jiǎn)單的div，div為一個(gè)小的圓形。
給每個(gè)div加上一個(gè)動(dòng)畫(huà)效果，該動(dòng)畫(huà)的效果是高度逐漸變長(zhǎng)，最后再變回原樣。
每個(gè)div延遲不同的時(shí)間才開(kāi)始執(zhí)行，這樣就會(huì)有先后的層次感。
然后我們來(lái)看看各個(gè)部分的代碼實(shí)現(xiàn)。
基本的div元素
基本的div元素是一個(gè)小的圓形。
基本的div元素
定義動(dòng)畫(huà)
定義的動(dòng)畫(huà)主要是改變div的高度，在完成50%的時(shí)候達(dá)到最高值，完成100%時(shí)恢復(fù)到原來(lái)高度。
動(dòng)畫(huà)效果
設(shè)置動(dòng)畫(huà)
將定義的動(dòng)畫(huà)添加至animation屬性，設(shè)置一個(gè)動(dòng)畫(huà)總執(zhí)行時(shí)間，然后給5個(gè)div設(shè)置不同的延時(shí)時(shí)間。
設(shè)置動(dòng)畫(huà)
HTML元素
將以上設(shè)置的CSS屬性都添加至HTML元素中。
HTML元素
將以上代碼寫(xiě)完后，直接在瀏覽器運(yùn)行就可以看到如loadingA的效果了。
如果細(xì)心的看完loadingA的實(shí)現(xiàn)過(guò)程，一定可以聯(lián)想到loadingB的實(shí)現(xiàn)。
loadingA是通過(guò)給高度加動(dòng)畫(huà)，那么loadingB就是通過(guò)給寬度加動(dòng)畫(huà)，同樣給5個(gè)div不同的延遲時(shí)間。
這里我只給出其動(dòng)畫(huà)定義，其他的內(nèi)容與loadingA類似，詳細(xì)的內(nèi)容可以通過(guò)github去看。
loadingB動(dòng)畫(huà)
loadingC的實(shí)現(xiàn)效果如下。
loadingC
在loadingA和loadingB中是通過(guò)給高度和寬度增加動(dòng)畫(huà)實(shí)現(xiàn)的，而loadingC是通過(guò)給五個(gè)div增加縱向位移實(shí)現(xiàn)的。
loadingC實(shí)現(xiàn)的關(guān)鍵點(diǎn)就在于translateY的使用，因?yàn)閯?dòng)畫(huà)是從下往上跳動(dòng)，所以在完成度50%時(shí)，translateY設(shè)定為負(fù)值。
其定義的動(dòng)畫(huà)部分代碼如下所示。
定義動(dòng)畫(huà)
loadingD的實(shí)現(xiàn)效果如下。
loadingD效果
通過(guò)效果圖我們發(fā)現(xiàn)有兩點(diǎn)差異：
loading過(guò)程中透明度會(huì)發(fā)生變化，這個(gè)通過(guò)opacity實(shí)現(xiàn)。
在接近完成時(shí)有個(gè)上下輕微抖動(dòng)的效果，這個(gè)通過(guò)設(shè)置小單位的正負(fù)translateY值。
得到的動(dòng)畫(huà)代碼如下。
loadingD動(dòng)畫(huà)
loadingE的動(dòng)畫(huà)效果如下。
loadingE
loadingE的效果同loadingD類似，loadingD是通過(guò)縱向的位移變換，可以通過(guò)translateY實(shí)現(xiàn)。
loadingE是通過(guò)水平方向位移變換，可以通過(guò)translateX來(lái)實(shí)現(xiàn)。
而有一點(diǎn)不同的是，loadingE的div初始位置就是translateX(-300px)，表示從左側(cè)開(kāi)始運(yùn)動(dòng)。
loadingE動(dòng)畫(huà)
loadingF定義的動(dòng)畫(huà)如下所示。
loadingF
loadingF是旋轉(zhuǎn)效果，可以很容易想到是通過(guò)rotate實(shí)現(xiàn)。
loadingF中只有一個(gè)div，邊框設(shè)置為虛線即可，其CSS樣式如下。
loadingF基本樣式
其定義的動(dòng)畫(huà)樣式如下。
loadingF定義動(dòng)畫(huà)
loadingG與loadingH的動(dòng)畫(huà)效果如下。
loadingG&loadingH
loadingG與loadingH類似，loadingH在loadingG的基礎(chǔ)上增加了幾個(gè)點(diǎn)。
loadingG中是通過(guò)設(shè)置一個(gè)縱向的div-1，在該div-1內(nèi)增加一個(gè)div-2，div-2就是轉(zhuǎn)動(dòng)的圓點(diǎn)，div-2通過(guò)絕對(duì)定位計(jì)算出實(shí)際位置，當(dāng)div-1大小變化時(shí)，div-2也應(yīng)該重新計(jì)算位置。
div-2的CSS代碼如下所示。
loadingG基本樣式
在loadingH中，div-1內(nèi)有四個(gè)div，分別表示轉(zhuǎn)動(dòng)的四個(gè)圓點(diǎn)，也是通過(guò)絕對(duì)定位計(jì)算偏移位置。
最后設(shè)置動(dòng)畫(huà)，只需要讓div-1在一個(gè)動(dòng)畫(huà)周期內(nèi)旋轉(zhuǎn)360度即可。
loadingG
loadingI的效果圖如下所示。
loadingI
loadingI的動(dòng)畫(huà)主要涉及到放大縮小和旋轉(zhuǎn)兩個(gè)方面，放大縮小通過(guò)scale實(shí)現(xiàn)，旋轉(zhuǎn)通過(guò)rotate實(shí)現(xiàn)。具體的可以看看github上的完整代碼。
今天這篇文章主要是教大家如何使用CSS3的動(dòng)畫(huà)特性去實(shí)現(xiàn)loading效果，完全可以不用借助于第三方庫(kù)，大家也動(dòng)動(dòng)手自己實(shí)現(xiàn)一下吧。
loading等待效果圖對(duì)于前端頁(yè)面或者APP展示來(lái)說(shuō)是非常常見(jiàn)的，目前大多數(shù)的效果圖都是GIF的格式。鑒于GIF格式的圖會(huì)比較大，我們完全可以使用CSS去實(shí)現(xiàn)一個(gè)漂亮的loading效果，今天我們就一起來(lái)看看吧。
CSS3
如果有感興趣的可以去github上看源碼，github地址為：
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading-pie/loading-pie.html
首先，我們一起來(lái)看下使用CSS3編寫(xiě)的loading效果圖，如下所示。
loading效果圖
針對(duì)上面的loading效果，我們進(jìn)行仔細(xì)的分析，整體loading效果是由內(nèi)圓和外圓組成。
內(nèi)部圓實(shí)際是由四個(gè)半圓組成，2個(gè)左半圓，2個(gè)右半圓，每側(cè)的兩個(gè)半圓通過(guò)顏色深淺進(jìn)行區(qū)分，當(dāng)然顏色大家可以隨便選取，然后通過(guò)定義動(dòng)畫(huà)，在不同的時(shí)間節(jié)點(diǎn)通過(guò)z-index屬性顯示不同的半圓，剛好組成一個(gè)完整的旋轉(zhuǎn)效果。
這部分我們來(lái)看看頁(yè)面是如何通過(guò)代碼實(shí)現(xiàn)的。
HTML
首先是頁(yè)面的HTML代碼，正如上面的分析，首先要具有內(nèi)圓和外圓兩個(gè)div，然后內(nèi)圓是通過(guò)4個(gè)半圓實(shí)現(xiàn)，實(shí)際內(nèi)部是4個(gè)div，因此我們可以得到以下的HTML部分代碼。
頁(yè)面HTML代碼
CSS
其實(shí)最核心的部分就是CSS代碼，我會(huì)慢慢分析如何寫(xiě)出CSS部分的代碼。
首先是外圓部分，實(shí)際是一個(gè)完整的div通過(guò)border屬性構(gòu)成3/4的圓，然后通過(guò)動(dòng)畫(huà)轉(zhuǎn)動(dòng)這個(gè)3/4的圓。因此我們可以直接得出外圓的所有樣式如下。
外圓及其動(dòng)畫(huà)樣式
然后是內(nèi)圓部分，內(nèi)圓實(shí)際是一個(gè)完整的div，通過(guò)border-radius屬性得到完整的圓，其樣式如下。
內(nèi)圓外圈屬性
其次是內(nèi)部四個(gè)半圓的樣式，分為左邊和右邊兩個(gè)部分，左邊和右邊每個(gè)部分因?yàn)轭伾嫌袇^(qū)別，需要定義不同的動(dòng)畫(huà)。其中左邊兩個(gè)半圓的通用屬性如下。
左邊半圓通用屬性
左半邊深色圓的動(dòng)畫(huà)樣式如下。
左半邊深色圓動(dòng)畫(huà)
左半邊淺色圓的動(dòng)畫(huà)效果如下。
左半邊淺色圓動(dòng)畫(huà)
右半邊兩個(gè)半圓通用樣式如下。
右半邊兩個(gè)半圓通用樣式
右半邊深色圓有動(dòng)畫(huà)效果，而淺色圓沒(méi)有動(dòng)畫(huà)效果，它們的樣式如下。
右半邊深淺色半圓樣式
至此，所有的CSS樣式講解完畢，如果大家完整運(yùn)行后就可以得到文章開(kāi)始的效果。
本篇文章主要講解了如何使用CSS3動(dòng)畫(huà)來(lái)制作一個(gè)loading效果圖，感興趣的可以直接去github上看源碼，希望對(duì)你有所幫助~
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
