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 ❤️