CSS實(shí)現(xiàn)漸變式圓點(diǎn)加載動(dòng)畫

整體效果
知識(shí)點(diǎn): animation 時(shí)間函數(shù) steps()。
用 css3 模擬一個(gè)漸變式圓點(diǎn)加載效果。
核心代碼部分,簡(jiǎn)要說明了寫法思路;完整代碼在最后,可直接復(fù)制到本地運(yùn)行。
核心代碼
html 代碼
<div class="loading38"> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> </div>
用8個(gè) span 標(biāo)簽繪制8個(gè)圓點(diǎn)。
css 部分代碼
.loading38 { --r-num: 45deg; /*定義角度值*/ width: 40px; height: 40px; position: relative; animation: loading38-eff 1s steps(8) both infinite; /*steps函數(shù)*/ } .load-span38{ width: 6px; height: 6px; display: block; border-radius: 3px; position: absolute; left: 17px; top: 0; transform-origin: 3px 20px; /*定義變形中心點(diǎn)*/ } .load-span38:nth-of-type(1){ transform: rotate(var(--r-num)); background: #2FACFD; } .load-span38:nth-of-type(2){ transform: rotate(calc(var(--r-num)*2)); background: #33B4FD; } .load-span38:nth-of-type(3){ transform: rotate(calc(var(--r-num)*3)); background: #38BEFE; } .load-span38:nth-of-type(4){ transform: rotate(calc(var(--r-num)*4)); background: #3ECAFE; } .load-span38:nth-of-type(5){ transform: rotate(calc(var(--r-num)*5)); background: #45D7FE; } .load-span38:nth-of-type(6){ transform: rotate(calc(var(--r-num)*6)); background: #4BE4FE; } .load-span38:nth-of-type(7){ transform: rotate(calc(var(--r-num)*7)); background: #52F1FF; } .load-span38:nth-of-type(8){ transform: rotate(calc(var(--r-num)*8)); background: #57FBFF; } @keyframes loading38-eff{ to { transform: rotate(0deg); } from { transform: rotate(-360deg); } }
1、8個(gè) span 繪制8個(gè)圓點(diǎn),分別寫上不同的背景色
2、通過 transform-origin 屬性來(lái)定義變形的中心點(diǎn),然后給每個(gè)圓點(diǎn)計(jì)算角度變形(這里我定義的角度值為 (360°/8 = 45°)),注意這里的每次變形是基于上一個(gè)圓點(diǎn)的角度 +45deg
3、最后給整體加上 animation 動(dòng)畫,并設(shè)置時(shí)間函數(shù) steps() 為8,意思是分8次整體旋轉(zhuǎn)完成 360deg
完整代碼如下
html 頁(yè)面
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>漸變加載條</title> </head> <body> <div class="app"> <div class="loading38"> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> <span class="load-span38"></span> </div> </div> </body> </html>
css 樣式
/** style.css **/ .app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .loading38 { --r-num: 45deg; /*定義角度值*/ width: 40px; height: 40px; position: relative; animation: loading38-eff 1s steps(8) both infinite; } .load-span38{ width: 6px; height: 6px; display: block; border-radius: 3px; position: absolute; left: 17px; top: 0; transform-origin: 3px 20px; } .load-span38:nth-of-type(1){ transform: rotate(var(--r-num)); background: #2FACFD; } .load-span38:nth-of-type(2){ transform: rotate(calc(var(--r-num)*2)); background: #33B4FD; } .load-span38:nth-of-type(3){ transform: rotate(calc(var(--r-num)*3)); background: #38BEFE; } .load-span38:nth-of-type(4){ transform: rotate(calc(var(--r-num)*4)); background: #3ECAFE; } .load-span38:nth-of-type(5){ transform: rotate(calc(var(--r-num)*5)); background: #45D7FE; } .load-span38:nth-of-type(6){ transform: rotate(calc(var(--r-num)*6)); background: #4BE4FE; } .load-span38:nth-of-type(7){ transform: rotate(calc(var(--r-num)*7)); background: #52F1FF; } .load-span38:nth-of-type(8){ transform: rotate(calc(var(--r-num)*8)); background: #57FBFF; } @keyframes loading38-eff{ to { transform: rotate(0deg); } from { transform: rotate(-360deg); } }
頁(yè)面渲染效果
到此這篇關(guān)于CSS實(shí)現(xiàn)漸變式圓點(diǎn)加載動(dòng)畫的文章就介紹到這了,更多相關(guān)CSS加載動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家
相關(guān)文章
使用css實(shí)現(xiàn)水波加載動(dòng)畫效果
這篇文章主要介紹了使用css實(shí)現(xiàn)水波加載動(dòng)畫效果,技術(shù)上只用到了css+html,還是非常容易學(xué)習(xí)的,做出來(lái)的效果也很不錯(cuò),需要的朋友可以參考下2023-04-23CSS心形加載的動(dòng)畫源碼的實(shí)現(xiàn)
這篇文章主要介紹了CSS心形加載的動(dòng)畫源碼的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-08-10css+html實(shí)現(xiàn)Skeleton Screen 加載占位圖動(dòng)畫效果(帶動(dòng)畫)
這篇文章主要介紹了css+html實(shí)現(xiàn)Skeleton Screen 加載占位圖動(dòng)畫效果(帶動(dòng)畫),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要2020-05-19- 這篇文章主要介紹了css制作超萌吃豆豆加載動(dòng)畫效果,需要的朋友可以參考下2018-02-26
- 這篇文章主要介紹了純css寫出愛心版加載效果的示例代碼的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-02-06
CSS實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫
這篇文章主要介紹了CSS實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫的相關(guān)資料,像是彈簧在不斷伸縮,顯示加載進(jìn)度,感興趣的小伙伴們可以參考一下2016-04-25CSS實(shí)現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動(dòng)畫
這篇文章主要介紹了CSS實(shí)現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動(dòng)畫的相關(guān)代碼,運(yùn)用CSS3的border-radius圓角屬性、box-shadow陰影屬性等屬性制作出來(lái)的,感興趣的小伙伴2016-04-25CSS實(shí)現(xiàn)圓環(huán)旋轉(zhuǎn)加載動(dòng)畫
這篇文章主要介紹了CSS實(shí)現(xiàn)圓環(huán)旋轉(zhuǎn)加載動(dòng)畫,一個(gè)圓環(huán)表示加載進(jìn)度,像一個(gè)時(shí)鐘順時(shí)針旋轉(zhuǎn)一圈,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-25CSS實(shí)現(xiàn)橫向粒子變動(dòng)加載動(dòng)畫
這篇文章主要介紹了CSS實(shí)現(xiàn)橫向粒子變動(dòng)加載動(dòng)畫的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-25使用Loader.css和css-spinners來(lái)制作加載動(dòng)畫的方法
這篇文章主要介紹了使用Loader.css和css-spinners來(lái)制作加載動(dòng)畫的方法,基本上使用純CSS就可以實(shí)現(xiàn),簡(jiǎn)單高效,需要的朋友可以參考下2016-04-05