This is the 26th day of my participation in the Novembermore Challenge.The final text challenge in 2021
introduce
A long time ago I saw a big god wrote huawei mobile phone charging, the feeling is very amazing, has always been fresh in my mind, recently also started to imitate one. This issue is also an extension of charging water drop animation, we will take you to complete this mobile phone charging animation case from scratch by using SCSS, which contains some CSS tips, I hope you like it.
Here’s a sneak peek:
The body of the
1. Infrastructure
<div id="app">
<div class="loading">
<h5>60%</h5>
<div class="loading-warrper">
<div class="loading-circle"></div>
<div class="loading-drop">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
Copy the code@use "sass:math";
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400);
$color:#79f77f;
$num:12;
#app{
width: 100%;
height: 100vh;
background-color: black;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.loading{
width: 360px;
height: 360px;
position: relative;
h5{
width: 180px;
height: 180px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Source Code Pro', monospace;
font-size: 48px;
font-weight: normal;
color: white;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}
.loading-warrper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
filter: contrast(10) hue-rotate(0); }}Copy the codeWe’ll start with sass: Math and font. Font is for text, and Sass: Math is introduced because the project is built with vite and uses the latest Sass, and the latest Sass no longer supports the “/” symbol for division, instead math.div (a,b), a/ B. Then we define color and color and color and num to represent the number of primary colors and spans, respectively.
Div. loading-warrper as the main screen, spread the whole screen with black, h5 is mainly to display the current battery, use absolute positioning to suppress the bottom div.loading-warrper in order not to be affected by the filter attribute of div.loading-warrper. Div. loading-warrper we use fixed positioning to cover the full screen. Its purpose is that the div.loading-drop is always placed at the bottom, no matter how long the screen is, it can be fitted.
2. Ring rotation
.loading-circle{
position: relative;
width: 300px;
height: 300px;
box-sizing: border-box;
filter: blur(8px);
&::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color:black;
z-index: 10;
}
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 205px;
height: 205px;
transform: translate(-50%, -50%);
background-color: $color;
border-radius:42% 37% 55% 48% / 47% 43%;
animation: rotate 10sinfinite linear; }}@keyframes rotate {
50% {
border-radius:47% 43% / 42% 37% 55% 48%; 100%} {transform: translate(-50%, -50%) rotate(720deg); }}Copy the codeDiv. loading-circle must have a filter: blur attribute, which works with filter: contrast(10), which is the two necessary attributes to achieve the effect of adhesion. The pseudo-class after draws an ellipse, and we complete a rotation and change its ellipse shape through animation. Before draws a black circle to hide after, which only shows the edge position.
3. Charging animation
.loading-drop{
position: absolute;
bottom: -90px;
left: 50%;
margin-left: -50px;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: $color;
filter: blur(8px);
span{
width: 25px;
height: 25px;
display: block;
position: absolute;
border-radius: 50%;
background: $color;
@for $i from 0 through $num{&:nth-child(#{$i}) {
$size:25 + random(7) + px;
left: 20 + random(80) + px;
top: 50%;
transform: translate(-50%, -50%);
width: $size;
height: $size;
animation: up #{random(5) + 5}s ease-in-out infinite;
animation-delay: -#{math.div(random(10000),1000)}s; }}}}@keyframes up {
90% {
opacity: 0.7; 100%} {opacity:.5;
transform: translate(-50%, calc(-50vh + 60px)); }}Copy the codeDiv. Loading-drop still gives it a filter: blur attribute. We will draw a small circle and place it at the bottom with positioning, so that it will leak a small semicircle at the bottom of the screen at any height. Then we will use SCSS @for method to traverse the span below it, causing them to randomly obtain the size, offset, and animation execution period and delay through @random. Then the animation is very simple, our final goal is to make it float up, so we need to change the translateY position. Here I use CSS calculation method, make it float up to one side of the screen and then add the outer distance of the circle, so that it is compatible with all heights.
4. Color changing animation
.loading-warrper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
filter: contrast(10) hue-rotate(0);
animation: changeColor 5s infinite linear;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes changeColor {
100% {
filter: contrast(50) hue-rotate(360deg); }}Copy the codeWe expect the color to change over time. Previously, we used HSL to change the first value H, which is the gray level. We can directly use filter: hue-rotate to change the color as time goes by.
conclusion
I don’t know if you’ve learned anything from this, but you can see another practice of sticking effects and color changes in addition to HSL and the Filter: Hue-rotate scheme. You can also learn about the use of @for,@random,math, etc in SCSS.
In addition, this online demo case I use PUG template syntax, let the whole HTML structure more clean and efficient, you can also go to understand.