标签：

巧用 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() 这两个滤镜，可以很好的实现这种融合效果。

单独将两个滤镜拿出来，它们的感化分袂是：

filter: blur()： 给图像设置高斯模糊效果。

filter: contrast()： 调解图像的比拟度。

但是，当他们“合体”的时候，孕育产生了奇妙的融合现象。