This is the fifth 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 {
  width : 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 10px solid white;
  border-bottom-color: transparent;
  animation: rotation 2s linear infinite ;
}
span::after{
  content: ' ';
  position: absolute;
  left: 51px;
  top: 79px;
  border: 20px solid transparent;
  border-right-color: white;
  transform: rotate(-45deg);
}
@keyframes rotation {
  0% { transform: rotate(0deg)}100% { transform: rotate(360deg)}}Copy the code

The principle,

Step 1

Using the SPAN tag as the tail of the arrow, set to

  • The width and height are 96px
  • Border: 10px solid with the top/left/right border white and the bottom transparent
 width : 96px;
  height: 96px;
  border: 10px solid white;
  border-bottom-color: transparent; 
Copy the code

The renderings are as follows

Step 2

The SPAN label is rounded

border-radius: 50%;
Copy the code

The renderings are as follows

Step 3

Use the span:: After pseudo-class element as the arrow

Set to

  • Absolute positioning
  • Border: 20px solid, right border white, top/bottom/left border transparent
  • Rotation – 45 degree
  position: absolute;
  /* left: 51px; top: 79px; * /
  border: 20px solid transparent;
  border-right-color: white;
  transform: rotate(- 45deg);
Copy the code

The renderings are as follows

The red part of the image is span:: After

Step 4

Set the position of span::after

Note:

  • You need to move a little bit when you move the position here
  • Make sure the arrow and the tail overlap well
  • I’m sure you can do this mathematically, but it’ll take a little bit of time, and I’ll update the formula later on for how far you need to move in a more general case
/* The distance the arrow needs to move */
  left: 51px;
  top: 79px;
Copy the code

The renderings are as follows

Step 5

Add an animation for span

  • Clockwise rotation (0-360 degrees) 2s infinite cycle
 animation: rotation  2s linear infinite ;
Copy the code
/* Animation implementation */
@keyframes rotation {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg)
  }
}
Copy the code

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