HTML + CSS custom loading animation 069

2021-06-18 09:13:10

html css custom loading animation

Preface

Hello！ buddy ！
Thank you very much for reading Haihong's article , If there are mistakes in the text , You are welcome to point out ～

Self introduction. ଘ(੭ˊᵕˋ)੭
nickname ： Sea boom
label ： Program the ape ｜C++ player ｜ Student
brief introduction ： because C Language and programming , Then I turned to computer science , Lucky to have won the National Award 、 Provincial awards, etc , It has been insured . Currently learning C++/Linux（ It's really, really hard ～）
Learning experience ： Solid foundation + Take more notes + Knock more code + Think more + Learn English well ！

【 Animation Xiaole 】 It's boring to study and live at ordinary times , Inadvertently on some pages 、 Application transition / There's a lot of interest in loading animation , I want to know how to achieve it ？ Learn how to use it in your spare time css Achieve some simple animation effects , This article is only for your study notes , Record your study and life , Try to understand the principles of animation , A lot of “ eliminate ” Animation ！

Effect display

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,

step 1

Use span label , Set to

Relative positioning
Width ：48px Height ：6px
border-radius: 4px
Background color ： black
color： white （ After that, the shadow is white ）

span {

width: 48px;
height: 6px;
position: relative;
border-radius: 4px;
background-color: black;
color: white;
}

The renderings are as follows

Insert picture description here

step 2

take span Move upward 35px

span {

top: -35px;
}

The renderings are as follows

Insert picture description here

step 3

Use span The three shadows of , The location relationship is

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

The renderings are as follows

Insert picture description here

step 4

by span Add animation to the three shadows of

Every shadow animation process is actually the same , It's just that the initial position is different

Take the animation effect of a shadow as an example , The rest are the same

shadow 1 The key to animation is 5 frame

Briefly described as ： Move from left to right , Back to the left

In terms of location ,y The axis offset is always the same ,x Axis direction offset change

Change 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 that there
Insert picture description here
The renderings are as follows

Insert picture description here

shadow 2、3 Empathy

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 span Background color

span {

/* background-color: black; */
}

The final effect is as follows

Insert picture description here

Conclusion

The article is only for study notes , Record from 0 To 1 A process of

I hope it will be of some help to you , If you have any mistakes, you are welcome to correct them ～

I am a Sea boom ଘ(੭ˊᵕˋ)੭, If you think it's ok , Please like it

Thank you for your support ️
Insert picture description here

版权声明

本文为[Haihong Pro]所创，转载请带上原文链接，感谢

https://qdmana.com/2021/06/20210601175154543M.html

文章推荐