preface
Hello! Friend!!!
First of all, thank you very much for reading haihua’s article. If there are any mistakes in the article, please point them out
Haha self introduction
Nickname: Sea Bombing
Tags: program ape a | C++ player | student
Introduction: Got acquainted with programming because of C language, then transferred to computer major, honored to win national award, provincial award and so on, has been recommended for research. Currently learning C++/Linux (really, really hard ~)
Learning experience: solid foundation + more notes + more code + more thinking + learn English!
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 code
CSS
html.body {
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: # 263238;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* The red border is for hints only */
border: 2px solid red;
}
span {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
position: relative;
color: white;
animation: loading 1s linear infinite alternate;
}
@keyframes loading {
0% {
box-shadow: -76px -26px, -26px 0.26px 0.76px 0
}
33% {
box-shadow: -76px 0px, -26px -26px.26px 0.76px 0
}
66% {
box-shadow: -76px 0px, -26px 0.26px -26px.76px 0
}
100% {
box-shadow: -76px 0, -26px 0.26px 0.76px -26px}}Copy the code
The principle,
Step 1
Using the span tag, set
- Width and height are 24px
- Background color: red
The renderings are shown below
Step 2
The span tag is rounded
border-radius: 50%;
Copy the code
The renderings are shown below
Step 3
Add animation to span
Box-shadow with span
The key has four frames
The first frame
- Use shadows to act as white balls
- The first white ball is 76px to the left of the red ball and 26px above it
- The rest of the balls have a vertical distance of 0
box-shadow: -76px -26px, -26px 0, 26px 0, 76px 0
Copy the code
The renderings are shown below
The second frame
- The second white ball moves up 26px vertically, with the same lateral displacement
box-shadow: -76px 0px, -26px -26px, 26px 0, 76px 0
Copy the code
The renderings are shown below
The third frame
- The third white ball will move up 26px vertically, with the same lateral displacement
box-shadow: -76px 0px, -26px 0, 26px -26px, 76px 0
Copy the code
The renderings are shown below
The fourth frame
- The fourth white ball moves up 26px vertically, with the same lateral displacement
box-shadow: -76px 0, -26px 0, 26px 0, 76px -26px
Copy the code
The renderings are shown below
Then annotate with span background color
Finally, to sum up
The animation code is
animation: loading 1s linear infinite alternate;
Copy the code
@keyframes loading {
0% {
box-shadow: -76px -26px, -26px 0, 26px 0, 76px 0
}
33% {
box-shadow: -76px 0px, -26px -26px, 26px 0, 76px 0
}
66% {
box-shadow: -76px 0px, -26px 0, 26px -26px, 76px 0
}
100% {
box-shadow: -76px 0, -26px 0, 26px 0, 76px -26px
}
}
Copy the code
The renderings are shown below
conclusion
Source of learning:
Codepen. IO/bhadupranja…
The article is only a study note, recording a process from 0 to 1. Hope to be helpful to you, if there is a mistake, welcome friends to correct ~
My name is haihu ଘ(੭ ᵕ)੭. If you think it is ok, please give me a like
Writing is not easy, “like” + “Favorites” + “forward”
Thanks for your support ❤️