This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

preface

Hello! Friend!!!

Thank you very much for reading haihong’s article, if there are any mistakes in the article, please point out ~

Self-introduction ଘ(੭, ᵕ)੭

Nickname: Haihong

Tag: programmer monkey | C++ contestant | 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!

[Animation Xiao Xiao Le] Usually study life is rather boring, inadvertently in some web pages, applications transition/loading animation developed a strong interest, want to know how to achieve the specific? Then in the free time to learn how to use CSS to achieve some simple animation effects, the article is only for their own learning notes, record learning life, strive to understand the principle of animation, a lot of “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;
  color: white;
  /* background-color: black; * /
  box-shadow: 20px -10px.40px 10px.60px 0px;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0% {
    box-shadow: 20px -10px.40px 10px.60px 0px
  }
  25% {
    box-shadow: 20px 0px.40px 0px.60px 10px
  }
  50% {
    box-shadow: 20px 10px.40px -10px.60px 0px
  }
  75% {
    box-shadow: 20px 0px.40px 0px.60px -10px
  }
  100% {
    box-shadow: 20px -10px.40px 10px.60px 0px}}Copy the code

The principle,

Step 1

Using the SPAN tag, set to

  • Relative positioning
  • The width is 8px and the height 48px
  • Background color: black
  • Color: white (makes the shadow of span white)
  • border-radius: 4px
span { width: 8px; height: 48px; position: relative; border-radius: 4px; color: white; background-color: black; }Copy the code

The renderings are as follows

Step 2

Shift span 40px to the left

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

The renderings are as follows

Step 3

Use the three shadows of span, with a positional relationship of

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

The positions of the three shadows are as follows

Note: Shadow 2 is located in the center of the page

Step 4

Animate the three shadows of span

Every shadow animation is actually the same except at the beginning

Take a shadow animation as an example

Box-shadow: 20px 0px Indicates that shadow 1 moves 20px in the x direction and 0px in the y direction

For box-shadow: 20px to 10px it means to move 20px in the x direction and -10px in the y direction.

The position of shadow 1 on the X-axis is always set to 20px

It’s going to change on the Y-axis

The change process is as follows:-10 ->0 -> 10 ->0 -> -10 Shadow 1 animation implementation code:

@keyframes loadingx{ 0%{ box-shadow: 20px -10px; } 25%{ box-shadow: 20px 0px; } 50%{ box-shadow: 20px 10px; } 75%{ box-shadow: 20px 0px; } 100%{ box-shadow: 20px -10px; }}Copy the code

The renderings are as follows

Similarly, the change process of shadows 2 and 3 is similar to that of Shadow 1

It’s just a slight change in the starting position of the Y-axis

The change process of shadow 2 is: 10 ->0 -> -10 ->0 -> 10

The change process of shadow 3 is: 0 -> 10 -> 0 ->-10 -> -0

Animation implementation code:

span { animation: loading 1s linear infinite; }Copy the code
@keyframes loading { 0% { box-shadow: 20px -10px, 40px 10px, 60px 0px } 25% { box-shadow: 20px 0px, 40px 0px, 60px 10px } 50% { box-shadow: 20px 10px, 40px -10px, 60px 0px } 75% { box-shadow: 20px 0px, 40px 0px, 60px -10px } 100% { box-shadow: 20px -10px, 40px 10px, 60px 0px } }Copy the code

The results are as follows:

Step 5

Comment out the SPAN background color

span { /* background-color: black; * /}Copy the code

Get the final effect drawing

conclusion

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

Thanks for your support ❤️