This is the 17th day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

Hello! Friend!!!

Thank you very much for reading this article. If there are any mistakes in this article, please point them out

ଘ(੭ straddle ᵕ)੭

Nickname: Sea Bombing

Tags: program ape | C++ contestant | 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!

[Animation Eliminating joy] Usually learning life is boring, inadvertently to some web pages, application transition/loading animation generated a strong interest, want to know how to achieve the specific? Then in the idle time to learn how to use CSS to achieve some simple animation effects, the article is only for their own study notes, record learning life, to understand the principle of animation, more “eliminate” animation!

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: #ed556a;
  /* background-color: #82466e; * /
  animation: backColor 4s infinite;
}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

span {
  width: 8px;
  height: 48px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  left: -40px;
  animation: loading 1s linear infinite alternate;
}

@keyframes loading {
  0% {
    box-shadow: 20px 0 rgba(255.255.255.0.25), 40px 0 rgba(255.255.255.1), 60px 0 rgba(255.255.255.1);
  }
  50% {
    box-shadow: 20px 0 rgba(255.255.255.1), 40px 0 rgba(255.255.255.0.25), 60px 0 rgba(255.255.255.1);
  }
  100% {
    box-shadow: 20px 0 rgba(255.255.255.1), 40px 0 rgba(255.255.255.1), 60px 0 rgba(255.255.255.0.25); }}Copy the code

The principle,

Step 1

Using the span tag, set to

  • Relative positioning
  • Width is 8px and height is 48px
  • Background color: black
  • border-radius: 4px
span { width: 8px; height: 48px; position: relative; background-color: black; border-radius: 4px; }Copy the code

The renderings are shown below

Step 2

Move span 40px to the left

span { left: -40px; }Copy the code

The renderings are shown below

Step 3

Set three shadows for span

The colors are all white, and the positional relationship is

Box-shadow: 20px 0 rgba(255, 255, 255, 1), /* shadow 1*/ 40px 0 rgba(255, 255, 255, 1), /* Shadow 2*/ 60px 0 rgba(255, 255, 255, 1); 3 * / / * shadowCopy the code

The shadow positions are as follows

Step 4

Animate the three shadows of span

The shade of each shade is set by using the rgba() function

  • Rgba (255, 255, 255, 1) represents pure white
  • Rgba (255, 255, 255, 0.25) indicates light white

The animation key has three frames

The first frame

  • Shadow 1 is light white
  • Shadows 2 and 3 are pure white
Box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 1);Copy the code

The renderings are shown below

The second frame

  • Shadow 2 is light white
  • Shadows 1 and 2 are pure white

The renderings are shown below

The third frame

  • Shadow 3 is light white
  • Shadows 1 and 2 are pure white

The renderings are shown below

Set the animation to transition from frame 1 to frame 3 and then to frame 1 using animation

animation: loading 1s linear infinite alternate;
Copy the code
@keyframes loading { 0% { box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 1); } 50% {box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 0.25), 60px 0 rgba(255, 255, 255, 1); } 100% {box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 0.25); }}Copy the code

The renderings are shown below

Step 5

Comment out the span background color

The final renderings are shown below

conclusion

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

Thanks for your support ❤️