Coincidentally achieve cool charging animation with CSS
Step by step, take a look at using only CSS, you can tinker with what kind of charging animation.
Painting batteries
Of course, battery charging, first of all have to use CSS to draw a battery, this is not difficult, just a whole:
Europe, and barely is it. With the battery, then the next direct charging it. The most simple animation, it should be filled with the color of the entire battery can.
Many ways, the code is also very simple, direct look at the effect of:
There is a smell inside, if less demanding, this will barely be able to muddle through. Shows the power through blue gradient, for charge of animation by displacement animation patches. But always felt something was lacking.
Increased shadow and color variation
If you want to continue to optimize, then you need to add point details.
We know that when low battery, power is usually expressed expressed as green is red, high power. Add color change to give the whole point of the shadow, feeling breathing, so that the charging effect looks really moving.
Knowledge Point
Here, there is only one point of knowledge:
- Use filter: hue-rotate () of gradient colors for color conversion transition animation
We can not direct a gradient animation, here to adjust the hue through the filter, in order to achieve the transformation animated color gradient.
Examples of the complete Demo: CodePen Demo - Animation One Battery
Add wave
ok, just a small milestone in the count, then go further. Top electricity as a straight line feeling a little blankly, where we transform what, if able to top a straight line, instead rolling waves, the effect will be a little more realistic.
After transformation effects:
Use CSS to achieve this effect rolling waves, is really just a cover-up with specific early can I write this article:
Pure CSS to achieve wave effect!
Knowledge Point
Here's a knowledge point is above said using CSS to achieve a simple wave effect, achieved by the cover-up, look at Figure will understand:
Examples of the complete Demo: CodePen Demo - Battery Animation Two
OK, that this, plus the effect of the above-mentioned number of changes have been regarded as a relatively good effects. Of course, the above effect looks very CSS, is glance think it can be done with CSS.
使用强大的 CSS 滤镜实现安卓充电动画效果
那下面这个呢？
用安卓手机的同学肯定不陌生，这个是安卓手机在充电的时候的效果。看到这个我就很好奇，使用 CSS 能做到吗？
经过一番尝试，发现使用 CSS 也是可以很好的模拟这种动画效果：
上述 Gif 录制的效果图是完全使用 CSS 模拟的效果。
上述例子完整的 Demo： HuaWei Battery Charging Animation
知识点
拆解一下知识点，最主要的其实是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜，可以很好的实现这种融合效果。
单独将两个滤镜拿出来，它们的作用分别是：
filter: blur()： 给图像设置高斯模糊效果。filter: contrast()： 调整图像的对比度。
但是，当他们“合体”的时候，产生了奇妙的融合现象。
先来看一个简单的例子：
仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。
当然，这种效果在之前的文章也多次提及过，更具体的，可以看看：
颜色的变换
当然，这里也是可以加上颜色的变换，效果也很不错：
上述例子完整的 Demo： HuaWei Battery Charging Animation
容易忽视的点
通过调节 filter: blur() 及 filter: contrast() 属性的值，动画效果其实会有很大程度的变化，好的效果需要不断的调试。当然，经验在其中也是发挥了很重要的作用，说到底还是要多尝试。
最后
本文给出的几个充电动画，效果渐进增强，本文只指出了最核心的知识点。但是在实际输出的过程中有很多小细节是本文没有提及的，感兴趣的同学还是应该点进 Demo 好好看看源码或者自己动手实现一遍。
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。
好了，本文到此结束，希望对你有帮助 :)
民营企业还有什么疑问或者建议，可以多多交流
文章来源：https://juejin.im/post/5e00240ee51d45583c1cc9a7