This is the fourth 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: 20px solid;
  animation: animloader 2s linear infinite alternate;
}

@keyframes animloader {
  0% { border-color: rgba(255.255.255.1)  rgba(255.255.255.0)  rgba(255.255.255.0)  rgba(255.255.255.0); }33% { border-color: rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.0)  rgba(255.255.255.0); }66% { border-color: rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.0); }100% { border-color: rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.1);}
}
Copy the code

The principle,

Step 1

Using the SPAN tag, set

  • The width and height are 96px
  • Border: 20px solid

The renderings are as follows

Step 2

Span rounded corners,

border-radius: 50%;
Copy the code

The renderings are as follows

Step 3

Add an animation for span

The animation is divided into 4 frames

The first frame

  • Set the top border color to white and the rest to transparent

For the sake of observation

Here is the view before rounding the span

This will give you a better understanding of how each frame works

The second frame

  • Top + right border color set to white and rest transparent

If border-radius is not set, the effect before 50% is as follows

The third frame

  • The top + right + bottom border color is set to white and the rest is transparent

If border-radius is not set, the effect before 50% is as follows

The fourth frame

  • Top + Bottom + left + right borders are white

If border-radius is not set, the effect before 50% is as follows

To sum up

The process of change is:

The following code

 animation: animloader 2s linear infinite ;
Copy the code
/* Animation implementation */
@keyframes animloader {
/* first frame */
  0% { border-color: rgba(255.255.255.1)  rgba(255.255.255.0)  rgba(255.255.255.0)  rgba(255.255.255.0); }/* second frame */
  33% { border-color: rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.0)  rgba(255.255.255.0); }/* frame 3 */
  66% { border-color: rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.0); }/* frame 4 */
  100% { border-color: rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.1)  rgba(255.255.255.1);}
}
Copy the code

Note: RGBA function is used here to set the transparency level to 0 to achieve the transparent color

The renderings are as follows

Step 4

We can see from the effect above

The effect we want is to go back to the beginning of the animation after 4 frames

It’s actually quite simple

Set one more parameter

Set the animation to: take turns playing the animation backwards

animation: animloader 2s linear infinite alternate;
Copy the code

Results the following

Note:

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