Cool charging animation with pure CSS

Time:2020-9-16

Step by step, let’s see what kind of charging animation effect can be achieved by using CSS only.

Draw a battery

Of course, to charge a battery, first you have to use CSS to draw a battery. This is not difficult. Just make a whole battery

Oh, it’s just it. With the battery, you can charge it directly. The simplest animation is to fill the whole battery with color.

There are many methods and the code is very simple. You can see the effect directly

If the requirements are not high, this can be reluctantly handed over. The electric quantity is represented by the blue gradient, and the charging animation is realized by the displacement animation of the color block. But there’s something missing.

Increase shadow and color change

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

We know that when the power is low, it is usually red, and when it is high, it is green. Then add some shadow changes to the whole color block, the feeling of breathing, so that the charging effect looks really moving.

Knowledge points

In fact, there is only one knowledge point here

Use filter: hue rotate() to make color transition animation for gradient color

We can’t directly animate a gradient color. Here we adjust the hue through the filter, so as to realize the transition animation of the gradient color.

Code pen demo — battery animation one

Add waves

OK, just a small milestone. Let’s go further. The top of the electricity is a straight line, which is a bit dull. Here we make some transformation. If we can change the top line into wave rolling, the effect will be more realistic.

The effect after transformation:

In fact, using CSS to achieve this kind of wave rolling effect is just a kind of screen. For details, I wrote this article earlier:

Pure CSS for wave effect!

Knowledge points

One of the knowledge points here is that the simple wave effect can be realized by using CSS as mentioned above, which can be realized by using the barrier method

Code pen demo — battery animation two

OK, to this point, the above effect plus the number change has been considered a relatively good effect. Of course, the above effect still looks very CSS, that is, at a glance, I think it can be done with CSS.

Using powerful CSS filter to achieve Android charging animation effect

What about the next one?

Students who use Android phones are no stranger. This is the effect of Android phones when charging. I’m curious to see this. Can CSS do this?

After some attempts, it is found that CSS can also simulate this animation effect well

The above GIF recording renderings are completely simulated using CSS.

Complete demo: Huawei battery charging animation

Knowledge points

The most important thing is to use itfilter: contrast()as well asfilter: blur()These two filters can achieve this fusion effect very well.

Take out the two filters separately, and their functions are as follows:

filter: blur(): set the Gaussian Blur effect to the image.filter: contrast(): adjust the contrast of the image.

However, when they “fit” together, there is a wonderful fusion phenomenon.

Let’s start with a simple example

Look carefully at the process of two circles intersecting, when the edge contacts with each other, it will produce a kind of edge fusion effect. The fuzzy edge of Gaussian blur is removed through the contrast filter, and the fusion effect is achieved by using Gaussian blur.

Of course, this effect has been mentioned many times in previous articles

CSS flame? It’s no surprise that CSS filter techniques and details you don’t know

Color transformation

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

Complete demo: Huawei battery charging animation

Easily overlooked points

By adjustingfilter: blur()andfilter: contrast()Property value, animation effect will have a great degree of change, good effect needs constant debugging. Of course, experience also plays an important role in it. In the final analysis, we should try more.

last

This paper presents several charging animation, the effect of gradual enhancement, this paper only points out the core knowledge points. But in the actual output process, there are many small details that are not mentioned in this article. Interested students should click into demo to have a good look at the source code or implement it by yourself.

More wonderful CSS technical articles are summarized in my GitHub – ICSS, which is continuously updated. Welcome to click on Star subscription collection.

Well, this is the end of this article. I hope it can help you:)

If you have any questions or suggestions, you can communicate more. The original articles are limited in writing and shallow in learning. If there are any mistakes in the article, please let me know.

Recommended Today

Oracle scheduled tasks

Timing task query To query Oracle scheduled tasks, you can use: –Scheduled tasks for all users SELECT * FROM dba_jobs; –Timing task of the user select * from user_jobs; In the query results, the what field generally stores the name of the stored procedure (or the specific stored procedure content). Broken = n indicates that […]