This is the 28th day of my participation in the August Text Challenge.More challenges in August
preface
Hello! Friend!!!
Thank you very much for reading haihong’s article, if there are any mistakes in the article, please point out ~
Self-introduction ଘ(੭, ᵕ)੭
Nickname: Haihong
Tag: programmer monkey | C++ contestant | student
Introduction: because of the C language acquaintance programming, then transferred to the computer major, had the honor to win the national award, provincial award and so on, has guaranteed graduate school. Currently learning C++/Linux (really really hard ~)
Learning experience: solid foundation + more notes + more code + more thinking + learn English well!
[Animation Xiao Xiao Le] Usually study life is rather boring, inadvertently in some web pages, applications transition/loading animation developed a strong interest, want to know how to achieve the specific? Then in the free time to learn how to use CSS to achieve some simple animation effects, the article is only for their own learning notes, record learning life, strive to understand the principle of animation, a lot of “eliminate” animation!
Results show
The Demo code
HTML
<! 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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>
Copy the codeCSS
html.body {
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #222f3e;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
}
span {
width: 8px;
height: 48px;
display: inline-block;
position: relative;
border-radius: 4px;
color: white;
/* background: black; * /
left: -60px;
animation: loading 2s 0s linear infinite alternate;
}
@keyframes loading {
0% {
box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.0), 60px 0 rgba(255.255.255.1), 80px 0 rgba(255.255.255.0), 100px 0 rgba(255.255.255.0)}20% {
box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.1), 60px 0 rgba(255.255.255.0), 80px 0 rgba(255.255.255.1), 100px 0 rgba(255.255.255.0)}40% {
box-shadow: 20px 0 rgba(255.255.255.1), 40px 0 rgba(255.255.255.0), 60px 0 rgba(255.255.255.0), 80px 0 rgba(255.255.255.0), 100px 0 rgba(255.255.255.1)}60% {
box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.1), 60px 0 rgba(255.255.255.0), 80px 0 rgba(255.255.255.1), 100px 0 rgba(255.255.255.0)}80% {
box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.0), 60px 0 rgba(255.255.255.1), 80px 0 rgba(255.255.255.0), 100px 0 rgba(255.255.255.0)}100% {
box-shadow: 20px 0 rgba(255.255.255.1), 40px 0 rgba(255.255.255.1), 60px 0 rgba(255.255.255.1), 80px 0 rgba(255.255.255.1), 100px 0 rgba(255.255.255.1)}}Copy the codeThe principle,
Step 1
Using the SPAN tag, set to
- The width is 8px and the height 48px
- Relative positioning
- Background color: red
- border-radius: 4px;
span {
width: 8px;
height: 48px;
position: relative;
border-radius: 4px;
background: red;
}
Copy the codeThe renderings are as follows:
Step 2
Move the SPAN label 60px to the left
span {
left: -60px;
}
Copy the codeThe renderings are as follows:
Step 3
Use 5 shadows of span and set the color to white
Its position relation is:
box-shadow:
20px 0 rgba(255.255.255.1), / * shadow1* /40px 0 rgba(255.255.255.1), / * shadow2* /60px 0 rgba(255.255.255.1), / * shadow3* /80px 0 rgba(255.255.255.1), / * shadow4* /100px 0 rgba(255.255.255.1);5 * / / * shadow
Copy the codeThe renderings are as follows:
Step 4
Control the display of 5 shadows through animation
Display and otherwise by controlling the transparency level of the color
- (255,255,255,0) : This is white, but the transparency level is 0, does not show white, transparent
- (255,255,255,1) : pure white
Set 6 keyframes (including initial state and final state)
Let’s say I use 0 for white and I don’t use 0 for transparent; 1 indicates white
The states of 5 shadows in 6 frames are:
- Frame 1:00100, meaning that shadow 3 is white and other shadows are transparent
- Frame 2:01010, shadows 2 and 4 are white, others are transparent
- Frame 3:10001, shadows 1 and 5 are white, others are transparent
- Frame 4:01010, shadows 2 and 4 are white, others are transparent
- Frame 5:00100, shadow 3 is white, other shadows are transparent
- Frame 6:11111, all white
The first frame effect:
Write code according to the above description
span {
animation: loading 2s 0s linear infinite alternate;
}
@keyframes loading {
0% {
box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.0), 60px 0 rgba(255.255.255.1), 80px 0 rgba(255.255.255.0), 100px 0 rgba(104.22.22.0);
}
20% {
box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.1), 60px 0 rgba(255.255.255.0), 80px 0 rgba(255.255.255.1), 100px 0 rgba(255.255.255.0);
}
40% {
box-shadow: 20px 0 rgba(255.255.255.1), 40px 0 rgba(255.255.255.0), 60px 0 rgba(255.255.255.0), 80px 0 rgba(255.255.255.0), 100px 0 rgba(255.255.255.1);
}
60% {
box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.1), 60px 0 rgba(255.255.255.0), 80px 0 rgba(255.255.255.1), 100px 0 rgba(255.255.255.0);
}
80% {
box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.0), 60px 0 rgba(255.255.255.1), 80px 0 rgba(255.255.255.0), 100px 0 rgba(255.255.255.0);
}
100% {
box-shadow: 20px 0 rgba(255.255.255.1), 40px 0 rgba(255.255.255.1), 60px 0 rgba(255.255.255.1), 80px 0 rgba(255.255.255.1), 100px 0 rgba(255.255.255.1); }}Copy the codeThe effect is as follows:
Step 5
Comment out the red background of the span
span {
/* background: red; * /
}
Copy the codeTo get the final result
conclusion
The essay is just a study note, recording a process from 0 to 1
Hope to help you, if there is a mistake welcome small partners to correct ~
I am haihong ଘ(੭, ᵕ)੭
If you think it’s ok, please give it a thumbs up
Thanks for your support ❤️
