整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          手把手教你使用CSS3動(dòng)畫(huà)特性實(shí)現(xiàn)loading效果,趕緊來(lái)學(xué)習(xí)一下吧

          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

          實(shí)現(xiàn)效果

          首先我們來(lái)看看需要實(shí)現(xiàn)的效果。

          效果圖

          然后我們一個(gè)個(gè)來(lái)看都是怎么實(shí)現(xiàn)的吧。

          loadingA

          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的效果了。

          loadingB

          如果細(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

          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

          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

          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

          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

          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

          loadingI的動(dòng)畫(huà)主要涉及到放大縮小和旋轉(zhuǎn)兩個(gè)方面,放大縮小通過(guò)scale實(shí)現(xiàn),旋轉(zhuǎn)通過(guò)rotate實(shí)現(xiàn)。具體的可以看看github上的完整代碼。

          結(jié)束語(yǔ)

          今天這篇文章主要是教大家如何使用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

          實(shí)現(xiàn)效果

          首先我們來(lái)看看需要實(shí)現(xiàn)的效果。

          效果圖

          然后我們一個(gè)個(gè)來(lái)看都是怎么實(shí)現(xiàn)的吧。

          loadingA

          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的效果了。

          loadingB

          如果細(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

          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

          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

          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

          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

          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

          loadingI的動(dòng)畫(huà)主要涉及到放大縮小和旋轉(zhuǎn)兩個(gè)方面,放大縮小通過(guò)scale實(shí)現(xiàn),旋轉(zhuǎn)通過(guò)rotate實(shí)現(xiàn)。具體的可以看看github上的完整代碼。

          結(jié)束語(yǔ)

          今天這篇文章主要是教大家如何使用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)效果。

          頁(yè)面實(shí)現(xià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)始的效果。

          結(jié)束語(yǔ)

          本篇文章主要講解了如何使用CSS3動(dòng)畫(huà)來(lái)制作一個(gè)loading效果圖,感興趣的可以直接去github上看源碼,希望對(duì)你有所幫助~


          主站蜘蛛池模板: 国产高清精品一区| 国产香蕉一区二区精品视频| 亚洲AV午夜福利精品一区二区| 日韩一区二区超清视频| 中文字幕色AV一区二区三区| 无码人妻AⅤ一区二区三区水密桃| 无码av人妻一区二区三区四区| 日韩一本之道一区中文字幕| 国产成人精品无人区一区| 国产嫖妓一区二区三区无码| 亚洲熟妇无码一区二区三区导航 | 在线观看国产区亚洲一区成人 | 国产激情一区二区三区小说| 国产AV午夜精品一区二区三| 冲田杏梨高清无一区二区| 亚洲AV成人一区二区三区观看 | 视频精品一区二区三区| 亚洲av成人一区二区三区观看在线 | 国产麻豆剧果冻传媒一区| 日韩一区二区三区四区不卡| 亚洲一区动漫卡通在线播放| 人妻AV一区二区三区精品| 久久久久人妻一区精品色| 奇米精品视频一区二区三区| 在线播放一区二区| 国产美女在线一区二区三区| tom影院亚洲国产一区二区| 久久人做人爽一区二区三区| 精品一区二区三区在线播放视频| 精品国产一区二区三区色欲 | 一区三区三区不卡| 久久精品一区二区三区中文字幕 | 亚洲国产综合无码一区二区二三区 | 午夜视频一区二区三区| 精品视频午夜一区二区| av在线亚洲欧洲日产一区二区| 国产伦理一区二区| 日本免费一区二区在线观看| 国产麻豆精品一区二区三区| 欲色影视天天一区二区三区色香欲| 亚洲国产精品成人一区|