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

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 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 "destroy" 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: 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;
  }
}

The principle is explained in detail

step 1

Use the span tag and set it 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;
}

The effect diagram is as follows

Insert picture description here

Step 2

Move the span up 35px

span {
  top: -35px;
}

The effect diagram is as follows

Insert picture description here

Step 3

Use the three shadows of span, the positional relationship is

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

The effect diagram is as follows

Insert picture description here

Step 4

Add animation to the three shadows of the span

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

Here is the animation effect of a shadow as an example, the rest can be obtained in the same way

Shadow 1 animation key has 5 frames

The simple description is: move from left to right, then back to the left

In terms of positional relationship, the y-axis offset has not changed, and the x-axis offset has changed.

Changes to -10 -> 0 -> 10 -> 0 -> -10

The code is

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

Note here the

Insert picture description here


renderings are as follows

Insert picture description here

Same for shadows 2, 3

It’s just that 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;
  }
}

The three shadow animation effects are as follows

Insert picture description here

Step 5

Comment out the span background color

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

The final rendering is as follows

Insert picture description here

Concluding remarks

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