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: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background: red;
  color: white;
  box-shadow: -64px 0.64px 0;
  animation: rotation 2s ease-in-out infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg)}100% {
    transform: rotate(360deg)}}Copy the code

The principle,

Step 1

Using the span tag, set to

  • Width and height are 48px
  • Background color: red
 width: 48px;
  height: 48px;
  background: red;
Copy the code

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 two shadows for the span

On the left and right

  • Left shadow: white in size as span
  • Right shadow: white size as span
color: white;
  box-shadow: - 64.px 0.64px 0; 
Copy the code

The renderings are shown below

Step 4

Add animation to span

  • Rotate clockwise (0-360 degrees) for an infinite loop of 2 seconds
  • Speed curve: ease-in-out
animation: rotation 2s ease-in-out infinite;
Copy the code
@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
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 ❤️