This is my first day of the genwen challenge
First look at the effect:
Preface:
This idea was made by Steven, the master of up, at STATION B, and I thought it was very good. Then I made one myself. (pure CSS)
Implementation:
- Define a label that has three drop boxes, a circle box to show the number, and a bottom box:
<div class="kuang">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="quan"></div>
<span>99%</span>
</div>
Copy the code- Give the bottom box the basic style. Flex layout so that the three drops are temporarily vertically centered.
.kuang{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5.5.5);
filter: contrast(30);
}
Copy the codefilter: contrast(30); Adjust the contrast of the image. If it’s 0 percent, it’s going to go completely black. The value is 100%. The graph stays the same. Values can exceed 100%, meaning lower comparisons will be applied. If no value is set, the default value is 1.
- The basic pattern of water droplets. Absolute positioning, so that the three boxes are on top of each other.
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61.233.99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}
Copy the codefilter: blur(20px); Blur the image.
Important: We give the drop box ambiguity, so that the three drop boxes will present a fuzzy state. Then, we set the image contrast for the bottom box, so that the blurred image will be redrawn to give the following effect:
- Give a basic style for the circle to display the number. Remember to set the ambiguity as well. In this way, the image contrast will have the effect of fusion with falling water droplets.
.quan{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61.233.99);
filter: blur(20px);
animation: zhuan 3s infinite;
}
Copy the code- Animate the water droplets as they fall from the top, changing their size as they fall, and you can adjust them to what you think is best.
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%); }100%{
transform: scale(0.3) translateY(0px); }}Copy the code- Play the animation after the delay time of the 2nd and 3rd drops, so that the 3 drops will fall separately. As for the few seconds, you can adjust it slowly and set it to the best effect you think.
.kuang div:nth-of-type(2) {animation-delay: 1.5 s;
}
.kuang div:nth-of-type(3) {animation-delay: 2s;
}
Copy the code- Animate the circle that displays the number and make it rotate. During the period can let it size or Angle or other changes, the specific value can be adjusted slowly, set to their own best effect.
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1) rotate(360deg); }}Copy the codeComplete code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Aurora Borealis night.</title>
<style>* {margin: 0;
padding: 0;
box-sizing: border-box;
}
.kuang{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5.5.5);
filter: contrast(30);
}
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61.233.99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}
.kuang div:nth-of-type(2) {animation-delay: 1.5 s;
}
.kuang div:nth-of-type(3) {animation-delay: 2s;
}
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%); }100%{
transform: scale(0.3) translateY(0px); }}.quan{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61.233.99);
filter: blur(20px);
animation: zhuan 3s infinite;
}
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1) rotate(360deg); }}span{
position: absolute;
color: rgb(184.182.182);
font-size: 26px;
font-family: 'fangsong';
font-weight: bold;
}
</style>
</head>
<body>
<div class="kuang">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="quan"></div>
<span>99%</span>
</div>
</body>
</html>
Copy the codeConclusion:
