This is the 10th 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;
  background: violet;
  border-radius: 50%;
  animation: animloader28 2s linear infinite;
  position: relative;
  box-shadow: 60px 0 white inset;
}
  
@keyframes animloader28 {
  0% { box-shadow: -144px 0white inset; }100% { box-shadow: 96px 0 white inset;}
}
Copy the code

The principle,

Step 1

Using the SPAN tag, set to

  • The width and height are 96px
  • Relative positioning
  • Background color: purple
  width: 96px;
  height: 96px;
  background: violet;
  position: relative;
Copy the code

The renderings are as follows

Step 2

Add an animation for span

Box-shadow is used hereJust for the sake of the animation

Box-shadow: 30px 0 white inset; The effect produced

The white part is the box-shadow, 30px wide, and because it is set to inset, the shadow is inside the span

Box-shadow: 60px 0 white inset; The effect of

Think carefully about

If I use animation here

  • Initial status: box-shadow: 30px 0 white inset
  • End status (100%) : Box-shadow: 60px 0 white inset

The results are as follows

You can find

The white shaded area increases from 30px to 60px

Supplement:box-shadow: -60px 0 white inset;(Note the difference between the positions of -60px and +60px white shadows)

To sum up

If the animation critical state is

  • Initial status (0%) : box-shadow: -96px 0 white inset
  • End status (100%) : box-shadow: 96px 0 white inset
 animation: animloader 2s linear infinite;
Copy the code
@keyframes animloader {
  0% {
    box-shadow: - 96.px 0 white inset;
  }
  100% {
    box-shadow: 96px 0white inset; }}Copy the code

The transformation process is shown as follows

The animation looks like this

Step 3

Span rounded corners,

border-radius: 50%;
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 ❤️