Share tips on using CSS to achieve cool charging animation effects

This article will introduce to you how to use CSS to achieve cool charging animation effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#Step by step, see what kind of charging animation effect you can create using only CSS. (Learning video sharing: css video tutorial)

Draw a battery

---

Of course, to charge the battery, you must first draw a battery with CSS. This is not difficult, just make one as you like:

Oh, that’s it. Now that you have the battery, let’s just charge it. The simplest animation is to fill the entire battery with color.

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

##It has an internal smell. If the requirements are not high, this will be enough. The power is represented by a blue gradient, and the charging animation is realized through the displacement animation of the color block. But it always felt like something was missing.

Increase shadow and color changes

---

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

We know that when the battery is low, the battery is usually indicated in red, and when the battery is high, it is indicated in green. Then add some shadow changes and a breathing feeling to the entire color block to make the charging effect look really moving.

Knowledge Point

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

##Use filter: hue-rotate() to perform color transition animation on gradient colors

We cannot animate a The gradient color is animated directly. Here, the hue is adjusted through the filter, thereby realizing the gradient color transformation animation.

Complete Demo of the above example:

CodePen Demo -- Battery Animation One

Add waves

Okay, just a small milestone, let’s take another step forward. The top of the battery is a straight line, which feels a bit dull. Here we will transform it. If we can change the top straight line to wavy rolling, the effect will be more realistic.

The effect after transformation:

##

Using CSS to achieve this wavy scrolling effect is actually just a blinding method. The specific article can be found in this article I wrote earlier:

Pure CSS to achieve wave effect!

Knowledge Point

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

#Complete Demo of the above example: CodePen Demo -- Battery Animation Two

##OK, here it is, The above effects plus digital changes are already considered a relatively good effect. Of course, the above effect still looks very CSS, but at first glance, I feel that it can be done using CSS.

Use powerful CSS filters to achieve Android charging animation effect

##What about the one below?

---

Students who use Android phones are definitely familiar with this. This is when the Android phone is charging. Effect. When I saw this, I was curious, can it be done using CSS?

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

The above Gif recorded renderings are completely simulated using CSS.

Complete Demo of the above example:

HuaWei Battery Charging Animation

Knowledge Points

Let’s break down the knowledge points. The most important thing is to use the two filters

filter: contrast()

and filter: blur(). You can This fusion effect is achieved very well. Take out the two filters separately. Their functions are:

filter: blur()
1. : Set Gaussian blur effect to the image.
filter: contrast()
2. : Adjust the contrast of the image.
However, when they "fitted together", a wonderful fusion phenomenon occurred.

Let’s look at a simple example first:

Look carefully at the process of intersecting two circles. When the edges touch each other, a boundary fusion effect will be produced. Use the contrast filter to remove the blurred edges of Gaussian blur and use Gaussian blur. Achieve a fusion effect.

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

• CSS Flame? No need to mention
• CSS filter skills and details you don’t know

Color transformation

Of course, color transformation can also be added here, and the effect is also very good:

##Complete Demo of the above example: HuaWei Battery Charging Animation

Easily overlooked points

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

This article is reproduced from: https://juejin.cn/post/6844904029336649741

Author: ChokCoco

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of Share tips on using CSS to achieve cool charging animation effects. For more information, please follow other related articles on the PHP Chinese website!