This is the 11th day of my participation in Gwen Challenge

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 {
  border: 48px solid white;
  border-bottom-color: #ed5a65;
  border-radius: 50%;
  animation: rotation 1s linear infinite;
}
  
@keyframes rotation {
  0% { transform: rotate(0deg)}100% { transform: rotate(360deg)}}Copy the code

The principle,

Step 1

Using the SPAN tag, set

  • Border: 48px white solid

The renderings are as follows

Note: this does not set width, height, just use border to generate a square

To understand how this works

Let’s set span

  • The width and height are 36px and the background color is green
  • Top border: 48px solid Aquamarine
  • Bottom border: 48px solid red
  • Left border: 48px solid white
  • Right border: 48px solid color:yellow
width: 36px;
  height: 36px;
  /* span background color */
  background-color: green;
  border: 48px solid ;
  /* Top border color */
  border-top-color: aquamarine;
  /* Bottom border color */
  border-bottom-color: red;
  /* Left border color */
  border-left-color: white;
  /* Right border color */
  border-right-color:yellow ;
Copy the code

Results the following

By examining the SPAN element

We notice that the span element is now 132px wide and height

This is because of the border

132px=36px+48px+48px

Continuously decrease the initial width and height of span

Until to 0

That leaves border

  border: 48px solid ;
  /* Top border color */
  border-top-color: aquamarine;
  /* Bottom border color */
  border-bottom-color: red;
  /* Left border color */
  border-left-color: white;
  /* Right border color */
  border-right-color:yellow ;
Copy the code

Results the following

Now you can understand how step 1 works

Step 2

Set the bottom border color to red

border-bottom-color: #ed5a65;
Copy the code

The renderings are as follows

Step 3

Span rounded corners,

border-radius: 50%;
Copy the code

The renderings are as follows

Step 4

Add an animation for span

  • Rotate clockwise (0 degrees -360 degrees) for 1s infinite loop
animation: rotation 1s linear 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 ❤️