Effect (source code at the end):
This effect is similar to the water wave loading animation html+css . The effect is not difficult to achieve, but the usage of "stealing the sky and changing the day" is worth learning.
achieve:
1. Define the label, .container is the bottom box that is the shape of the battery, .water is the amount of power in it, and .shadow is the shadow behind it:
<div class="container">
<div class="water"></div>
<div class="shadow"></div>
</div>
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) ;
}
position: relative; Absolute positioning.
background-color: rgb(255, 255, 255); White.
border-radius: 10px; The angle radian.
box-shadow: 0 0 10px rgb(255, 255, 255); Shadow.
3. Define the head of the battery through double pseudo-classes:
.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) ;
}
position: absolute;
top: -20px;
left: 50%; Define position
transform: translateX(-50%); Offset 50% of itself to the left, the purpose is to center.
4. Define the effect of slowly increasing 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);
}
}
background-image: linear-gradient(0deg,rgb(9, 198, 245),rgb(44, 243, 120)); Gradient color.
animation: rise 12s linear forwards; Define the animation, the height changes, which is equivalent to charging. forwards is the attribute that retains the last step after the specified animation ends.
overflow: hidden; overflow hidden.
filter: hue-rotate(360deg); Hue rotation can change the color.
5. Define the water wave effect (the principle is to define a curved white box rotating, which covers a part of the upper part of the .water, and then defines the overflow and concealment of the .water, so that a white wave is obtained by'stealing the sky and changing the day'):
.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);
}
}
The position size and radian can be set by yourself depending on the effect.
transform: rotate(360deg); Rotate.
6. Define another water wave, the principle is the same, but the color should be set to transparency, so as not to cover the other water 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);
}
}
7. Define the shadow behind, its height and color transformation 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);
}
}
position: absolute;
bottom: -8px;
left: -3%;
width: 106%; position and size.
z-index: -1; Set -1 to display at the end.
filter: hue-rotate(0deg) blur(10px); blur is the degree of blur.
Complete code:
<!DOCTYPE html>
<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>
to sum up:
This effect is similar to the water wave loading animation html+css . The effect is not difficult to achieve, but the usage of "stealing the sky and changing the day" is worth learning.
No one should say that I am in the water article~
I finally passed Kesan these days~