Step by step, see what you can do with charging animations using only CSS.

Draw a battery

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

Oh, that’s just about it. Now that you have the battery, charge it directly. The simplest animation, that should be filled with color battery can be.

There are many methods, the code is also very simple, directly look at the effect:

Have inside flavour, if the requirement is not high, this also can be handed over reluctantly. The electric quantity is denoted by the blue gradient, and the animation of charging is realized by the displacement of the color block. But there’s something missing.

Add shadows and color variations

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

As we know, when the charge is low, the charge is usually red, and when the charge is high, it is green. Add the change of dot shadows and the feeling of breathing to the whole block to make the charging effect look like it is actually moving.

knowledge

At this point, there is only one knowledge point:

  • Rotate () the filter: Hue-rotate () is used to rotate the gradient colors

It is not possible to animation a gradient directly. Instead, we use a filter to adjust the hue to achieve the gradient transformation animation.

Complete Demo: CodePen Demo — Battery Animation One

Add the wave

Ok, that’s a small milestone, let’s take it a step further. The top of the charge is a straight line, which makes it a little dull. Here, we will transform it. If we can change the top straight line to wave rolling, the effect will be more realistic.

Effect after renovation:

Using CSS to achieve this wave scrolling effect is really just a smoke screen, as I wrote earlier in this post:

Pure CSS to achieve wave effects!

knowledge

One of the key points here is to use CSS to achieve a simple wave effect, through the smoke screen, look at the diagram to understand:

CodePen Demo — Battery Animation Two

OK, at this point, the above effect plus the number change is a relatively good effect. Of course, the above effect looks very CSS, but at first glance it seems like it can be done with CSS.

Use powerful CSS filters to animate android charging

How about this one down here?

If you have an Android phone, this is what it looks like when it’s charging. So I was wondering, can you do that with CSS?

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

The Gif recorded above is a full CSS simulation.

The preceding example is a complete Demo: HuaWei Battery Charging Animation

knowledge

Contrast () filter: blur() filter: blur() Filter: blur() filter: blur() filter: contrast() filter: blur() filter: blur() filter: blur()

Take out the two filters separately, and they do the following:

  1. filter: blur(): Sets a Gaussian blur to the image.
  2. filter: contrast(): Adjusts the image contrast.

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

Let’s start with a simple example:

Look carefully at the process of the intersection of the two circles, when the edges and edges contact, will produce a boundary fusion effect, through the contrast filter to eliminate the Blur edges of the Gaussian blur, using the Gaussian blur to achieve the fusion effect.

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

  • CSS fire? A cinch
  • CSS filter tips and details you didn’t know

Color change

Of course, you can also add a color change here, and it works very well:

The preceding example is a complete Demo: HuaWei Battery Charging Animation

Easy to overlook

By adjusting the values of the filter: blur() and filter: contrast() properties, the animation effect can actually change significantly. Good effects require constant debugging. Of course, experience also plays an important role in this, but at the end of the day, try more.

The last

This article gives a few charging animation, the effect of gradual enhancement, this article only points out the most core knowledge. However, there are many small details in the actual output process is not mentioned in this article, interested students should still click on the Demo to have a good look at the source code or their own implementation.

More exciting CSS technical articles are summarized in my Github – iCSS, continue to update, welcome to click the star subscription favorites.

Ok, this article is over, hope to help you 🙂

If there are any questions or suggestions, you can communicate more, original article, writing style is limited, talent is shallow, if there is something wrong in the article, hope to inform.