Effects (source code at the end) :

This effect is similar toWater wave loading animation HTML + CSSIt’s the same thing. The effect isn’t hard to pull off, but it’s worth learning how to do this.

Implementation:

1. Define the label:.container is the bottom box, which is the shape of the battery,.water is the amount of electricity in it, and.shadow is the shadow behind it:

 <div class="container">
        <div class="water"></div>
        <div class="shadow"></div>
    </div>
Copy the code

2. Define the basic style of. Container:

.container{
            position: relative;
            width: 200px;
            height: 300px;
            background-color: rgb(255.255.255);
            border-radius: 10px;
            box-shadow:  0 0 10px rgb(255.255.255); }Copy the code

position: relative; Relative positioning. background-color: rgb(255, 255, 255); White. border-radius: 10px; Angle radian. box-shadow: 0 0 10px rgb(255, 255, 255) ; The shadow.

3. Define the head of the battery through the double pseudo-class:

.container::after{
            content: ' ';
            position: absolute;
            top: -20px;
            left: 50%;
            width: 40px;
            height: 20px;
            transform: translateX(-50%);
            background-color: rgb(255.255.255);
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            box-shadow:  0 0 10px rgb(255.255.255); }Copy the code

position: absolute; top: -20px; left: 50%; Define position transform: translateX(-50%); Shift itself 50% to the left to center. 4. Define the effect of slowly increasing battery power:

 .water{
            position: absolute;
            bottom: 0;
            width: 100%;
            background-image: linear-gradient(0deg.rgb(9.198.245),rgb(44.243.120));
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
         animation: rise 12s linear forwards;
          
             overflow: hidden;
        }
        @keyframes rise{
            0%{
                height: 50px;
            }

            100%{
                height: 80%;            
                filter: hue-rotate(360deg); }}Copy the code

background-image: linear-gradient(0deg,rgb(9, 198, 245),rgb(44, 243, 120)); Gradient color. animation: rise 12s linear forwards; Define animation, height change, equivalent to charging. Forwards specifies the properties of the last step to be preserved after the animation ends. overflow: hidden; Overflow hiding. filter: hue-rotate(360deg); Hue rotation can make the color change.

5. Define the water wave effect (the principle is that a curved white box rotates and covers the upper part of. Water, which then defines the overflow to hide, so that the “sneak” gets a white wave) :

.water::after{
            content: ' ';
            position: absolute;
            top: -370px;
            left: -100px;
            width: 400px;
            height: 400px;
            border-radius: 40%;
            background-color: rgb(255.255.255);
            animation: move 5s linear infinite;
        }
        @keyframes move{
            100%{
                transform: rotate(360deg); }}Copy the code

Position size and radian can be set according to the effect. transform: rotate(360deg); Rotation.

6. Define a new wave with the same principle, but set the color to be transparent so as not to cover the other wave:

.water::before{
            content: ' ';
            position: absolute;
            top: -360px;
            left: -100px;
            width: 400px;
            height: 400px;
            border-radius: 45%;
            background-color: rgba(255.255.255.5);
            animation: move2 7s linear infinite;
        }
        @keyframes move2{
            100%{
                transform: rotate(360deg); }}Copy the code

7. Define the shadow behind which the height and color change should be consistent with. Water:

.shadow{
            position: absolute;
            bottom: -8px;
            left: -3%;
            width: 106%;
            background-image: linear-gradient(0deg.rgb(9.198.245),rgb(44.243.120));
            z-index: -1;
         animation: bianse 12s linear forwards;
        }
        @keyframes bianse{
            0%{
                height: 50px;
                filter: hue-rotate(0deg) blur(10px);
            }

            100%{
                height: 80%;            
                filter: hue-rotate(360deg) blur(10px); }}Copy the code

position: absolute; bottom: -8px; left: -3%; width: 106%; Location and size. z-index: -1; Setting -1 is shown at the end. filter: hue-rotate(0deg) blur(10px); Blur is the degree of blur.

Complete code:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>* {margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(189.189.189);
        }
        .container{
            position: relative;
            width: 200px;
            height: 300px;
            background-color: rgb(255.255.255);
            border-radius: 10px;
            box-shadow:  0 0 10px rgb(255.255.255); }.container::after{
            content: ' ';
            position: absolute;
            top: -20px;
            left: 50%;
            width: 40px;
            height: 20px;
            transform: translateX(-50%);
            background-color: rgb(255.255.255);
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            box-shadow:  0 0 10px rgb(255.255.255); }.water{
            position: absolute;
            bottom: 0;
            width: 100%;
            background-image: linear-gradient(0deg.rgb(9.198.245),rgb(44.243.120));
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
         animation: rise 12s linear forwards;
          
             overflow: hidden;
        }
        @keyframes rise{
            0%{
                height: 50px;
            }

            100%{
                height: 80%;            
                filter: hue-rotate(360deg); }}.water::after{
            content: ' ';
            position: absolute;
            top: -370px;
            left: -100px;
            width: 400px;
            height: 400px;
            border-radius: 40%;
            background-color: rgb(255.255.255);
            animation: move 5s linear infinite;
        }
        @keyframes move{
            100%{
                transform: rotate(360deg); }}.water::before{
            content: ' ';
            position: absolute;
            top: -360px;
            left: -100px;
            width: 400px;
            height: 400px;
            border-radius: 45%;
            background-color: rgba(255.255.255.5);
            animation: move2 7s linear infinite;
        }
        @keyframes move2{
            100%{
                transform: rotate(360deg); }}.shadow{
            position: absolute;
            bottom: -8px;
            left: -3%;
            width: 106%;
            background-image: linear-gradient(0deg.rgb(9.198.245),rgb(44.243.120));
            z-index: -1;
         animation: bianse 12s linear forwards;
        }
        @keyframes bianse{
            0%{
                height: 50px;
                filter: hue-rotate(0deg) blur(10px);
            }

            100%{
                height: 80%;            
                filter: hue-rotate(360deg) blur(10px); }}</style>
</head>
<body>
    <div class="container">
        <div class="water"></div>
        <div class="shadow"></div>
    </div>
</body>
</html>
Copy the code

Conclusion:

This effect is similar to the water wave loading animation HTML + CSS. The effect isn’t hard to pull off, but it’s worth learning how to do this.