巧用 CSS 實現酷炫的充電動畫

按部就班，看看只使用 CSS ，能夠鼓搗出什麼樣的充電動畫效果。

 

畫個電池

固然，電池充電，首先得用 CSS 畫一個電池，這個不難，隨便整一個：

歐了，勉強就是它了。有了電池，那接下來直接充電吧。最最簡單的動畫，那應該是用色彩把整個電池灌滿便可。

方法不少，代碼也很簡單，直接看效果：

有內味了，若是要求不高，這個勉強也就可以交差了。經過藍色漸變表示電量，經過色塊的位移動畫實現充電的動畫。可是總感受少了點什麼。

 

增長陰影及顏色的變化

若是要繼續優化的話，須要添加點細節。

咱們知道，低電量時，電量一般表示爲紅色，高電量時表示爲綠色。再給整個色塊添加點陰影的變化，呼吸的感受，讓充電的效果看起來確實是在動。 

 

知識點

到這裏，其實只有一個知識點：

• 使用 filter: hue-rotate() 對漸變色彩進行色彩過渡變換動畫

咱們沒法對一個漸變色直接進行 animation ，這裏經過濾鏡對色相進行調整，從而實現了漸變色的變換動畫。

上述例子完整的 Demo： CodePen Demo -- Battery Animation One

添加波浪

ok，剛剛算一個小里程碑，接下來再進一步。電量的頂部爲一條直線有點呆呆的感受，這裏咱們進行改造一下，若是能將頂部直線，改成波浪滾動，效果會更爲逼真一點。

改造以後的效果： 

使用 CSS 實現這種波浪滾動效果，其實只是用了一種障眼法，具體的能夠我早期寫的這篇文章：

純 CSS 實現波浪效果！

 

知識點

這裏的一個知識點就是上述說的使用 CSS 實現簡易的波浪效果，經過障眼法實現，看看圖就明白了：

上述例子完整的 Demo： CodePen Demo -- Battery Animation Two

OK，到這，上述效果加上數字變化已經算是一個比較不錯的效果了。固然上面的效果看上去仍是很 CSS 的，就是一眼看到就以爲用 CSS 是能夠作到的。

 

使用強大的 CSS 濾鏡實現安卓充電動畫效果

那下面這個呢？ 

用安卓手機的同窗確定不陌生，這個是安卓手機在充電的時候的效果。看到這個我就很好奇，使用 CSS 能作到嗎？

通過一番嘗試，發現使用 CSS 也是能夠很好的模擬這種動畫效果： 

上述 Gif 錄製的效果圖是徹底使用 CSS 模擬的效果。

上述例子完整的 Demo： HuaWei Battery Charging Animation

 

知識點

拆解一下知識點，最主要的實際上是用到了 filter: contrast() 以及 filter: blur() 這兩個濾鏡，能夠很好的實現這種融合效果。

單獨將兩個濾鏡拿出來，它們的做用分別是：

1. filter: blur()： 給圖像設置高斯模糊效果。
2. filter: contrast()： 調整圖像的對比度。

可是，當他們「合體」的時候，產生了奇妙的融合現象。

先來看一個簡單的例子：

仔細看兩圓相交的過程，在邊與邊接觸的時候，會產生一種邊界融合的效果，經過對比度濾鏡把高斯模糊的模糊邊緣給幹掉，利用高斯模糊實現融合效果。

固然，這種效果在以前的文章也屢次說起過，更具體的，能夠看看：

• CSS 火焰？不在話下
• 你所不知道的 CSS 濾鏡技巧與細節

 

顏色的變換

固然，這裏也是能夠加上顏色的變換，效果也很不錯： 

上述例子完整的 Demo： HuaWei Battery Charging Animation

 

容易忽視的點

經過調節 filter: blur() 及 filter: contrast() 屬性的值，動畫效果其實會有很大程度的變化，好的效果須要不斷的調試。固然，經驗在其中也是發揮了很重要的做用，說到底仍是要多嘗試。

 

最後

本文給出的幾個充電動畫，效果漸進加強，本文只指出了最核心的知識點。可是在實際輸出的過程當中有不少小細節是本文沒有說起的，感興趣的同窗仍是應該點進 Demo 好好看看源碼或者本身動手實現一遍。

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

好了，本文到此結束，但願對你有幫助 :)

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。