Effet (code source à la fin):
Cet effet est similaire à l' animation de chargement des vagues d'eau html + css . L'effet n'est pas difficile à obtenir, mais l'utilisation de «voler le ciel et changer la journée» vaut la peine d'être apprise.
atteindre:
1. Définissez l'étiquette, .container est la zone inférieure qui correspond à la forme de la batterie, .eau est la quantité d'énergie qu'elle contient et .shadow est l'ombre derrière elle:
<div class="container">
<div class="water"></div>
<div class="shadow"></div>
</div>
2. Définissez le style de base de .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; positionnement absolu.
couleur d'arrière-plan: rgb (255, 255, 255); blanc.
border-radius: 10px; L'angle radian.
boîte-ombre: 0 0 10px rgb (255, 255, 255); Shadow.
3. Définissez la tête de la batterie à travers des pseudo-classes doubles:
.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: absolue;
haut: -20px;
gauche: 50%; Définir la
transformation de position : translateX (-50%); Décalage de 50% de lui-même vers la gauche, le but est de centrer.
4. Définissez l'effet de l'augmentation lente de la puissance:
.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: gradient linéaire (0deg, rgb (9, 198, 245), rgb (44, 243, 120)); couleur du dégradé.
animation: monter 12s linéairement vers l'avant; définir l'animation, la hauteur change, ce qui équivaut à charger. forward est l'attribut qui conserve la dernière étape après la fin de l'animation spécifiée.
débordement: masqué; débordement masqué.
filtre: rotation de la teinte (360deg); la rotation de la teinte peut changer la couleur.
5. Définir l'effet de vague d'eau (le principe est de définir une boîte blanche incurvée en rotation, qui recouvre une partie de la partie supérieure de l'eau, puis définit le débordement et la dissimulation de l'eau, de sorte qu'une vague blanche soit obtenu en `` volant le ciel et en changeant le jour ''):
.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);
}
}
La taille de la position et le radian peuvent être définis par vous-même en fonction de l'effet.
transformer: faire pivoter (360deg); faire pivoter.
6. Définissez une autre vague d'eau, le principe est le même, mais la couleur doit être réglée sur transparence, afin de ne pas couvrir l'autre vague d'eau:
.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. Définissez l'ombre derrière, sa hauteur et sa transformation de couleur doivent être cohérentes avec .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: absolue;
bas: -8px;
gauche: -3%;
largeur: 106%; position et taille.
z-index: -1; Réglez -1 pour afficher à la fin.
filtre: flou de rotation de la teinte (0deg) (10px); le flou est le degré de flou.
Code complet:
<!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>
Pour résumer:
Cet effet est similaire à l' animation de chargement des vagues d'eau html + css . L'effet n'est pas difficile à obtenir, mais l'utilisation de «voler le ciel et changer la journée» vaut la peine d'être apprise.
Personne ne devrait dire que je suis dans l'article sur l'eau ~
J'ai finalement dépassé Kesan ces jours-ci ~