运用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()： 调整图像的对照度。
但是，当他们“合体”的时候，发生了巧妙的融合现象。
先来看一个简便的例子：
细心看两圆订交的历程，在边与边接触的时候，会发生一种边界融合的结果，通过对照度滤镜把高斯含糊的含糊边沿给干掉，利用高斯含糊实现融合结果。
当然，这种结果在此前的文章也屡次说起过，更详细的，可以看看：
- CSS 火焰？不在话下
- 你所不知道的 CSS 滤镜技巧与细节
色彩的变换
当然，这里也是可以加上色彩的变换，结果也很不错：
上述例子完全的 Demo： HuaWei Battery Charging Animation
容易无视的点
通过调理 filter: blur() 及 filter: contrast() 属性的值，动画结果其实会有很大程度的转变，好的结果需要不竭的调试。当然，经历在其中也是发挥了很重要的作用，说到底还是要多尝试。
最后
本文给出的几个充电动画，结果渐进增强，本文只指出了最中心的知识点。但是在实际输出的历程中有许多小细节是本文没有说起的，感乐趣的同学还是应当点进 Demo 好好看看源码或者本人动手实现一遍。
本文来自PHP中文网，CSS教程栏目，欢迎学习
以上就是使用CSS实现酷炫的充电动画的具体内容，更多请关注百分百源码网其它相关文章！
