巧用 CSS 实现酷炫的充电动画

循规蹈矩，看看只利用 CSS ，可以鼓捣出什么样的充电动画效果。

画个电池

当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：

欧了，勉强便是它了。
有了电池，那接下来直接充电吧。
最最大略的动画，那该当是用色彩把全体电池灌满即可。

方法很多，代码也很大略，直接看效果：

有内味了，如果哀求不高，这个勉强也就能够交差了。
通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。
但是总觉得少了点什么。

增加阴影及颜色的变革

如果要连续优化的话，须要添加点细节。

我们知道，低电量时，电量常日表示为赤色，高电量时表示为绿色。
再给全体色块添加点阴影的变革，呼吸的觉得，让充电的效果看起来确实是在动。

知识点

到这里，实在只有一个知识点：

利用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画

我们无法对一个渐变色直接进行 animation ，这里通过滤镜对色相进行调度，从而实现了渐变色的变换动画。

上述例子完全的 Demo：https://codepen.io/Chokcoco/pen/bGNqyra?editors=1100

添加波浪

ok，刚刚算一个小里程碑，接下来再进一步。
电量的顶部为一条直线有点呆呆的觉得，这里我们进行改造一下，如果能将顶部直线，改为波浪滚动，效果会更为逼真一点。

改造之后的效果：

利用 CSS 实现这种波浪滚动效果，实在只是用了一种障眼法，详细的可以我早期写的这篇文章：

纯 CSS 实现波浪效果！

知识点

这里的一个知识点便是上陈说的利用 CSS 实现大略单纯的波浪效果，通过障眼法实现，看看图就明白了：

上述例子完全的 Demo：https://codepen.io/Chokcoco/pen/qBErGoO

OK，到这，上述效果加上数字变革已经算是一个比较不错的效果了。
当然上面的效果看上去还是很 CSS 的，便是一眼看到就以为用 CSS 是可以做到的。

利用强大的 CSS 滤镜实现安卓充电动画效果

那下面这个呢？

用安卓手机的同学肯定不陌生，这个是安卓手机在充电的时候的效果。
看到这个我就很好奇，利用 CSS 能做到吗？

经由一番考试测验，创造利用 CSS 也是可以很好的仿照这种动画效果：

上述 Gif 录制的效果图是完备利用 CSS 仿照的效果。

上述例子完全的 Demo：https://codepen.io/Chokcoco/pen/vYExwvm

知识点

拆解一下知识点，最紧张的实在是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜，可以很好的实现这种领悟效果。

单独将两个滤镜拿出来，它们的浸染分别是：

filter: blur()： 给图像设置高斯模糊效果。
filter: contrast()： 调度图像的比拟度。

但是，当他们“合体”的时候，产生了奇妙的领悟征象。

先来看一个大略的例子：

仔细看两圆相交的过程，在边与边打仗的时候，会产生一种边界领悟的效果，通过比拟度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现领悟效果。

当然，这种效果在之前的文章也多次提及过，更详细的，可以看看：

CSS 火焰？不在话下你所不知道的 CSS 滤镜技巧与细节颜色的变换

当然，这里也是可以加上颜色的变换，效果也很不错：

上述例子完全的 Demo：https://codepen.io/Chokcoco/pen/vYExwvm

随意马虎忽略的点

通过调节 filter: blur() 及 filter: contrast() 属性的值，动画效果实在会有很大程度的变革，好的效果须要不断的调试。
当然，履历在个中也是发挥了很主要的浸染，说到底还是要多考试测验。

末了

本文给出的几个充电动画，效果渐进增强，本文只指出了最核心的知识点。
但是在实际输出的过程中有很多小细节是本文没有提及的，感兴趣的同学还是该当点进 Demo 好好看看源码或者自己动手实现一遍。

好了，本文到此结束，希望对你有帮助 :)

如果还有什么疑问或者建议，可以多多互换，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望奉告。