[Animation elimination music] HTML+CSS custom loading animation 068

Preface

Hello! Little buddies!
Thank you very much for reading Haihong’s article. If there is an error in the article, you are welcome to point it out~
 
self-introduction ଘ(੭ˊᵕˋ)੭
nickname: Haihong
Tags: programmers|C++ players|student
profile: I got acquainted with programming due to C language, then turn to Entered the computer major, fortunately to have won national awards, provincial awards, etc., has been guaranteed research. I am currently learning C++/Linux (really too difficult~)
Learning experience: a solid foundation + more notes + more code + more thinking + good English!
 
[Animation Xiaoxiaole] Normally studying and life are boring, and I unintentionally have a strong interest in the transition/loading animation of some webpages and applications. Want to know how to achieve it? In my free time, I will learn how to use CSS to achieve some simple animation effects. The article is only for my own study notes, record learning life, strive to understand the principles of animation, and "eliminate" animation a lot!

Show results

Insert picture description here

Demo code

HTML

<!DOCTYPE html>
<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>

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
  }
}

The principle is explained in detail

step 1

Use the span tag and set it to

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

The effect diagram is as follows

Insert picture description here

Step 2

Move the span to the left by 40px

span {
  left: -40px;
}

The effect diagram is as follows

Insert picture description here

Step 3

Use the three shadows of span, the positional relationship is

box-shadow: 20px 0px, /*阴影1*/
			40px 0px, /*阴影2*/
			60px 0px;/*阴影3*/

The positional relationship of the three shadows is as follows

Insert picture description here

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

Step 4

Add animation to the three shadows of the span

Each shadow animation effect is actually the same, but the starting state is different

Let's take the animation effect of a shadow as an example

box-shadow: 20px 0pxMeans that the shadow 1 moves 20px in the x-axis direction and 0px in the y-axis direction

If box-shadow: 20px -10pxit is moved in the x-axis direction refers 20px, y axis -10px (simply put, is moved to the left and then moved upward 20px 10px)

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

Changes on the y axis

The change process is: -10 -> 0 -> 10 ->0 -> -10

Insert picture description here


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;
  }
}

The effect diagram is as follows

Insert picture description here

In the same way, the change process of shadows 2 and 3 is the same as shadow 1.

It’s just that the starting position of the y-axis change slightly changes

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;
}
@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
  }
}

The effects are as follows:

Insert picture description here

Step 5

Comment out the span background color

span {
  /* background-color: black; */
}

Get the final rendering

Insert picture description here

Conclusion

The article is only used as a study note to record a process from 0 to 1

I hope to help you, if there is any mistake, please correct me~

I’m Haihongଘ(੭ˊᵕˋ)੭ , if you think it’s ok , please like it

Thank you for your support ❤️

Insert picture description here