Shulou(Shulou.com)05/31 Report--

The main content of this article is to explain "how to achieve water ripple battery charging animation special effects of pure CSS", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "pure CSS how to achieve water ripple battery charging animation special effects"!

Pre-knowledge:

To accomplish this special effect, you must know some of the pre-attributes, which are briefly introduced:

Animation, transform and filter will not be introduced, basically all animations will use these two attributes.

Box-shadow

Box-shadow: shadow

Usage: box-shadow: h-shadow v-shadow blur spread color inset

H-shadow: required, position of horizontal shadow, negative values allowed

V-shadow: required. The position of the vertical shadow. Allow negative values

Blur: blur distanc

Spread: the size of the shadow

Color: color of shadow

Inset: change the inner shadow from the outer shadow (at the beginning)

Border-radius

Border-radius: setting fillet

Four values can be set in the same way as margin and padding

That is, the order of the four values of each radius is: upper left corner, upper right corner, lower right corner, lower left corner.

If you omit the lower left corner, the upper right corner is the same.

If you omit the lower right corner, the upper left corner is the same.

If you omit the upper right corner, the upper left corner is the same.

Linear-gradient ()

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

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

Direction: use the angle value to specify the direction (or angle) of the gradient and determine the direction

What is the color of color...: in turn?

Container

We set up two div, a container at the bottom of the seat, with a small lid on top, mainly through the border-radius to set the surrounding fillet, and add box-shadow to add shadow to enhance the three-dimensional sense.

Charging effect

Here, you can use the positioning layout to control the position of water through top. The higher the value of top is, the lower the water is, and the smaller the value of top is, the higher the water is.

We set the water level to 80% and set a gradient of the water through linear-gradient ():

Then the animation is very simple, just control the top value will cause the water to rise, like this.

The points to pay attention to at this time are:

At the top, our container has a fillet, so when the animation reaches 100%, it should be the same as the fillet of the container.

The water level is moving, in order to enhance the three-dimensional sense, you can set shadows, you can have a progressive effect, so the color had better be a little darker, and the color had better be closer.

Discoloration is also controlled by: filter: hue-rotate (); this property

.content {/ / Container 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 (0150,136,0.83), 0px 4px 10px rgba (8,117,134,0.4);} 50% {filter: hue-rotate (60deg);} 80% {top: 20% Border-radius: 00 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'm sure you've all seen this special effect. The idea is to set the background color on the approximate position above and cover it with the same background color.

Then use the translate attribute, by converting the x, y values, and then by constantly rotating the angle, as to why the value is this value, I don't know. Those who know can leave a message in the comment area.

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

At this point, we found that this effect is not very real, cover two more, change the rotation value and the value of border-radius to set the water surface does not overlap, but there is a gap effect

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);}}

The effect at this time is very real.

At this point, I believe that the "pure CSS how to achieve water ripple battery charging animation special effects" have a deeper understanding, might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.