This is the 19th day of my participation in the August Wenwen 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: 48px;
  height: 6px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  /* background-color: black; * /
  top: -35px;
  color: white;
  animation: loading .6s linear infinite;
}

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

The principle,

Step 1

Using the SPAN tag, set to

  • Relative positioning
  • Width: 48px height: 6px
  • border-radius: 4px
  • Background color: black
  • Color: white (after the shadow is white)
span { width: 48px; height: 6px; position: relative; border-radius: 4px; background-color: black; color: white; }Copy the code

The renderings are as follows

Step 2

Move the span up 35px

span { top: -35px; }Copy the code

The renderings are as follows

Step 3

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

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

The renderings are as follows

Step 4

Animate the three shadows of span

Each shadow animation process is actually the same, but the initial position is different

Here is an example of a shadow animation, and the rest can be done similarly

The Shadow 1 animation key has 5 frames

It is simply described as moving from left to right and back to left

In terms of position relationship, the offset of y axis is constant, while the offset of x axis changes

The change is -10 -> 0 -> 10 -> 0 -> -10

The code for

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

Note that thereThe renderings are as follows

Same with shadows 2 and 3

Only the initial position of the animation is different

Shadow 2 10 -> 0 -> -10 -> 0 -> 10

Shadow 3 0 -> -10 -> 0 -> 10 -> 0

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

The three shadow animations look like this

Step 5

Comment out the SPAN background color

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

The final effect is shown below

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