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!

Daily sharing: Wechat public account [Haihum Pro] record life, learning bit by bit, share some source code or learning materials, welcome to follow ~

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 : 96px;
  height: 96px;
  border: 5px solid ;
  border-color: white ;
  border-radius: 50%; 
  position: relative;
  display: flex;
  justify-content: center;
  animation: rotation 2s linear infinite;
}
span::before{
  position: relative;
  content: ' ';
  background: red;
  width:  3px;
  height:  48px;
}

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

The principle,

Step 1

Use the SPAN TAB as the white part of the dial and set

  • Width and height are 96px
  • Border: 5px white solid
 width : 96px;
  height: 96px;
  border: 5px solid ;
  border-color: white ;
Copy the code

The renderings are shown below

Step 2

Use the span::before pseudo-class as the red pointer and set

  • Span ::before is placed in the middle of the span level, and the upper part is aligned with the span. (Use Flex layout for span and set text -content: center;)
  • Width is 3px and height is 48px
  • Background color: red
  • Relative positioning
  position: relative;
  content: ' ';
  background: red;
  width:  3px;
  height:  48px;
Copy the code

The renderings are shown below

Step 3

Span rounded corners,

border-radius: 50%; 
Copy the code

The renderings are shown below

Step 4

Add animation to span

  • It goes clockwise for 2 seconds
 animation: rotation 2s linear infinite;
Copy the code
span::before{
  position: relative;
  content: ' ';
  background: red;
  width:  3px;
  height:  48px;
}
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 ❤️