运用CSS完成酷炫的充电动画【html5教程】,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 好好看看源码或许本身着手完成一遍。
本文来自ki4网，CSS教程栏目，迎接进修
以上就是运用CSS完成酷炫的充电动画的细致内容，更多请关注ki4网别的相干文章！
