您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)如何使用CSS實(shí)現(xiàn)酷炫充電動(dòng)畫效果的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言,主要是用來設(shè)計(jì)網(wǎng)頁的樣式,使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁,也可以配合各種腳本對(duì)于網(wǎng)頁進(jìn)行格式化。
當(dāng)然,電池充電,首先得用 CSS 畫一個(gè)電池,這個(gè)不難,隨便整一個(gè):
歐了,勉強(qiáng)就是它了。有了電池,那接下來直接充電吧。最最簡(jiǎn)單的動(dòng)畫,那應(yīng)該是用色彩把整個(gè)電池灌滿即可。
方法很多,代碼也很簡(jiǎn)單,直接看效果:
有內(nèi)味了,如果要求不高,這個(gè)勉強(qiáng)也就能夠交差了。通過藍(lán)色漸變表示電量,通過色塊的位移動(dòng)畫實(shí)現(xiàn)充電的動(dòng)畫。但是總感覺少了點(diǎn)什么。
如果要繼續(xù)優(yōu)化的話,需要添加點(diǎn)細(xì)節(jié)。
我們知道,低電量時(shí),電量通常表示為紅色,高電量時(shí)表示為綠色。再給整個(gè)色塊添加點(diǎn)陰影的變化,呼吸的感覺,讓充電的效果看起來確實(shí)是在動(dòng)。
到這里,其實(shí)只有一個(gè)知識(shí)點(diǎn):
使用 filter: hue-rotate() 對(duì)漸變色彩進(jìn)行色彩過渡變換動(dòng)畫
我們無法對(duì)一個(gè)漸變色直接進(jìn)行 animation ,這里通過濾鏡對(duì)色相進(jìn)行調(diào)整,從而實(shí)現(xiàn)了漸變色的變換動(dòng)畫。
上述例子完整的 Demo: CodePen Demo -- Battery Animation One
ok,剛剛算一個(gè)小里程碑,接下來再進(jìn)一步。電量的頂部為一條直線有點(diǎn)呆呆的感覺,這里我們進(jìn)行改造一下,如果能將頂部直線,改為波浪滾動(dòng),效果會(huì)更為逼真一點(diǎn)。
改造之后的效果:
使用 CSS 實(shí)現(xiàn)這種波浪滾動(dòng)效果,其實(shí)只是用了一種障眼法,具體的可以我早期寫的這篇文章:
純 CSS 實(shí)現(xiàn)波浪效果!
這里的一個(gè)知識(shí)點(diǎn)就是上述說的使用 CSS 實(shí)現(xiàn)簡(jiǎn)易的波浪效果,通過障眼法實(shí)現(xiàn),看看圖就明白了:
上述例子完整的 Demo: CodePen Demo -- Battery Animation Two
OK,到這,上述效果加上數(shù)字變化已經(jīng)算是一個(gè)比較不錯(cuò)的效果了。當(dāng)然上面的效果看上去還是很 CSS 的,就是一眼看到就覺得用 CSS 是可以做到的。
那下面這個(gè)呢?
用安卓手機(jī)的同學(xué)肯定不陌生,這個(gè)是安卓手機(jī)在充電的時(shí)候的效果??吹竭@個(gè)我就很好奇,使用 CSS 能做到嗎?
經(jīng)過一番嘗試,發(fā)現(xiàn)使用 CSS 也是可以很好的模擬這種動(dòng)畫效果:
上述 Gif 錄制的效果圖是完全使用 CSS 模擬的效果。
上述例子完整的 Demo: HuaWei Battery Charging Animation
拆解一下知識(shí)點(diǎn),最主要的其實(shí)是用到了 filter: contrast()
以及 filter: blur()
這兩個(gè)濾鏡,可以很好的實(shí)現(xiàn)這種融合效果。
單獨(dú)將兩個(gè)濾鏡拿出來,它們的作用分別是:
filter: blur()
: 給圖像設(shè)置高斯模糊效果。
filter: contrast()
: 調(diào)整圖像的對(duì)比度。
但是,當(dāng)他們“合體”的時(shí)候,產(chǎn)生了奇妙的融合現(xiàn)象。
先來看一個(gè)簡(jiǎn)單的例子:
仔細(xì)看兩圓相交的過程,在邊與邊接觸的時(shí)候,會(huì)產(chǎn)生一種邊界融合的效果,通過對(duì)比度濾鏡把高斯模糊的模糊邊緣給干掉,利用高斯模糊實(shí)現(xiàn)融合效果。
當(dāng)然,這種效果在之前的文章也多次提及過,更具體的,可以看看:
CSS 火焰?不在話下
你所不知道的 CSS 濾鏡技巧與細(xì)節(jié)
當(dāng)然,這里也是可以加上顏色的變換,效果也很不錯(cuò):
上述例子完整的 Demo: HuaWei Battery Charging Animation
通過調(diào)節(jié) filter: blur()
及 filter: contrast()
屬性的值,動(dòng)畫效果其實(shí)會(huì)有很大程度的變化,好的效果需要不斷的調(diào)試。當(dāng)然,經(jīng)驗(yàn)在其中也是發(fā)揮了很重要的作用,說到底還是要多嘗試。
感謝各位的閱讀!關(guān)于“如何使用CSS實(shí)現(xiàn)酷炫充電動(dòng)畫效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。