preface

Hello! Friend!!!

First of all, thank you very much for reading haihong’s article. If there are any mistakes in the article, please point out ~

Ha ha, let me introduce myself

Nickname: Haihong

Tag: a program monkey | C++ player | 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!

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;
    border: 2px solid red;
}
span {
  width: 96px;
  height: 96px;
  border:10px solid;
  background:rgba(255.255.255.2);border-color: white white transparent transparent;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotation 2s ease-in-out infinite;
}
span::after{
  content: ' ';
  border: 24px solid;
  border-color: red red transparent transparent;
  border-radius: 50%;
}

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

The principle,

Step 1

Using the SPAN tag, set

  • The width and height are 96px
  • Background color: RGBA (255, 255, 255,.2)
width: 96px;
  height: 96px;
  background: rgba(255.255.255.2.); 
Copy the code

The renderings are as follows

Step 2

Set the span border

  • Border size: 10px
  • Shape: Straight line
  • Color: Top/right border white bottom/left border transparent

The renderings are as follows

Step 3

Set the Flex layout for the SPAN so that the elements are centered above, below, left, and right

 display: flex;
  align-items: center;
  justify-content: center;
Copy the code

Step 4

Use the SPAN :: After pseudo-class element as the red part

Set up the

  • Border size and shape: 24px solid
  • Top/right border color is red bottom/left border color is transparent
 border: 24px solid;
  border-color: red red transparent transparent;
Copy the code

The renderings are as follows

Step 5

Span, span::after rounded

border-radius: 50%;
Copy the code

The renderings are as follows

Step 6

Add an animation for span

  • Clockwise rotation (0-360 degrees) 2s infinite cycle
  • 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 as follows

conclusion

Source of Study:

Codepen. IO/bhadupranja…

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 you can write, please give a thumbs-up

Writing is not easy, “like” + “favorites” + “forward”

Thanks for your support ❤️