Pure CSS to achieve cool charging animation

Let’s take a look at what kind of charging animation effects we can create using only CSS.

Draw a battery

Of course, to charge the battery, you first need to draw a battery using CSS. This is not difficult, just draw one:

Oh, that’s it, barely. Now that you have a battery, let's charge it directly. The simplest animation would be to fill the entire battery with colors.

There are many methods and the code is very simple. Just look at the effect:

It has that flavor, and if you don't have high requirements, this will be enough. The blue gradient indicates the power level, and the charging animation is achieved through the displacement animation of the color blocks. But I always feel like something is missing.

Add shadows and color variations

If you want to continue optimizing, you need to add some details.

We know that when the battery is low, the battery level is usually indicated by red, and when the battery is high, it is indicated by green. Add some shadow changes to the entire color block to give it a breathing feeling, so that the charging effect looks like it is actually moving.

Knowledge Points

At this point, there is actually only one piece of knowledge:

Use filter: hue-rotate() to animate the color transition of the gradient color

We cannot animate a gradient color directly, so here we adjust the hue through filters to achieve the gradient color transformation animation.

A complete demo of the above example: CodePen Demo -- Battery Animation One

Add waves

Ok, this is just a small milestone, we will take it one step further. The top of the battery indicator is a straight line, which looks a bit dull. We can modify it here. If we can change the top straight line to a rolling wave, the effect will be more realistic.

The effect after transformation:

Using CSS to achieve this wave scrolling effect is actually just a trick. For details, please refer to this article I wrote earlier:

Pure CSS to achieve wave effect!

Knowledge Points

One of the knowledge points here is the use of CSS to achieve a simple wave effect, which is achieved through a trick. Just look at the picture and you will understand:

A complete demo of the above example: CodePen Demo -- Battery Animation Two

OK, at this point, the above effect plus the digital changes is already a pretty good effect. Of course, the above effect still looks very CSS, and at first glance you can tell that it can be achieved using CSS.

Use powerful CSS filters to achieve Android charging animation effects

What about the one below?

Students who use Android phones must be familiar with this. This is the effect when an Android phone is charging. When I saw this I was curious, can this be done using CSS?

After some attempts, I found that using CSS can also simulate this animation effect very well:

The effect recorded in the above Gif is completely simulated using CSS.

The complete demo of the above example: HuaWei Battery Charging Animation

Knowledge Points

Breaking down the knowledge points, the most important thing is actually the use of two filter: contrast() and filter: blur() , which can achieve this fusion effect very well.

Take out the two filters separately, their functions are:

filter: blur() : Sets Gaussian blur effect to the image. filter: contrast() : Adjusts the contrast of the image.

However, when they "merged", a wonderful fusion phenomenon occurred.

Let's look at a simple example:

Look carefully at the process of the two circles intersecting. When the edges touch each other, a boundary fusion effect will be produced. The blurred edges of Gaussian blur are eliminated through the contrast filter, and the fusion effect is achieved using Gaussian blur.

Of course, this effect has been mentioned many times in previous articles. For more details, you can see:

CSS Flame? CSS filter tips and details you don't know

Color Transformation

Of course, you can also add color changes here, and the effect is also very good:

The complete demo of the above example: HuaWei Battery Charging Animation

Points that are easy to overlook

By adjusting the values ​​of filter: blur() and filter: contrast() properties, the animation effect can actually change to a great extent, and good effects require constant debugging. Of course, experience also plays a very important role in this. In the final analysis, you still need to try more.

at last

This article gives several charging animations with gradually increasing effects. This article only points out the most core knowledge points. However, there are many small details in the actual output process that are not mentioned in this article. Students who are interested should click on the Demo to take a good look at the source code or implement it themselves.

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click on the star to subscribe and collect.

Well, this article ends here, I hope it helps you:)

If you have any questions or suggestions, please feel free to communicate with me. This is an original article, and my writing skills are limited. If there is anything wrong in the article, please let me know.