Pure CSS to realize the battery charging animation effect of water ripples

This article will introduce to you how to skillfully useCSSto achieve the battery charging animation effect of water ripples. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

We know that the three major languages that make up the front-end are:html,cssandjs, among which The most mysterious thing iscss, why do you say that? Since the emergence of animation, transition and other attributes, it can be said that as long as you can’t think of it, there is nothing you can’t do ~

The previous article introduced a mobile phone charging animation effect, and I will continue it today. Compared with the previous article, The article is a bit simple, but for the sake of my girlfriend, I will write it here~

Special effects:Battery charging special effects, the overall special effects can be seen at the top

Prerequisite knowledge:

If you want to complete this special effect, you must know some prerequisite attributes. Let’s briefly introduce them:

animation,transformandfilterwill not be introduced in detail. Basically all animations will use these two properties. [Recommended learning:css video tutorial]

box-shadow

##box-shadow：Shadow

• h-shadow: required, horizontal shadow position, negative values allowed
• v-shadow: Required. The position of the vertical shadow. Negative values allowed
• blur: blur distance
• spread: size of shadow
• color: Shadow color
• inset: Change the shadow from the outer shadow (at the start) to the inner shadow

border-radius

border-radius: Set rounded corners

marginandpadding

Upper left corner,Upper right corner,Lower right corner,Lower left corner.

If the lower left corner is omitted, the upper right corner is the same.
• If the lower right corner is omitted, the upper left corner is the same.
• If the upper right corner is omitted, the upper left corner is the same.

linear-gradient()

linear-gradient(): Gradient, used to create a gradient that represents two or more Picture of linear gradient of colors.

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction: Use the angle value to specify the direction (or angle) of the gradient, and specify the direction
• color...: What colors change to what colors in sequence

border-radius, and addbox -shadowAdd shadow to enhance the three-dimensional effect

##Charging effect

You can use positioning layout here and control it through

The position of the water. The larger the value oftop, the lower the water. The smaller the value oftop, the higher the water.We set the water level to 80% and pass

To set a gradient color of water:

Then the animation is very simple, you only need to control the

value It will cause the water to rise, like this

The points that need to be noted at this time are:

• The water level is moving. In order to enhance the three-dimensional effect, you can set a shadow, which can have a progressive effect, so the color is best slightly slightly Make it darker, and the color is better to be closer
• Change color or pass:
filter: hue-rotate();
• This attribute controls

  .content{ //容器 border-radius: 15px 15px 5px 5px; &::after{ position: absolute; top: 80%; background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%); border-radius: 0px 0px 5px 5px; box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08); animation: change 10s linear infinite; filter: hue-rotate(90deg); } } @keyframes change { 30% { box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(8, 117, 134, 0.4); } 50%{ filter: hue-rotate(60deg); } 80% { top: 20%; border-radius: 0 0 5px 5px; box-shadow: 0 14px 28px rgba(6, 136, 153, 0.2), 0 10px 10px rgba(12, 10, 112, 0.08); } 100% { top: 0%; filter: hue-rotate(0deg); border-radius: 15px 15px 5px 5px; box-shadow: 0 14px 28px rgba(7, 93, 104, 0), 0 10px 10px rgba(31, 3, 68, 0.4); } }

Water ripple special effect

I believe everyone has seen this special effect. The idea is to set the background color at the approximate position above, cover it with the same background color,

and then The

attribute is used, by converting thex,yvalues, and then by constantly rotating the angle. As for why the value is this value, I can’t figure it out. clear. . . Anyone who knows can leave a message in the comment area.

p{ //复盖 border-radius: 45% 47% 44% 42%; transform: translate(-50%, 0); animation: move 10s linear infinite; } @keyframes move { 100% { transform: translate(-50%, -160px) rotate(720deg); } }

p{ &:nth-child(2){ border-radius: 38% 46% 43% 47%; transform: translate(-50%, 0) rotate(-135deg); } &:nth-child(3){ border-radius: 42% 46% 37% 40%; transform: translate(-50%, 0) rotate(135deg); } }