"HTML + CSS" -- custom loading animation [047]

Haihong Pro 2021-05-04 14:24:09
html css custom loading animation


Preface

Hello! buddy !
First of all, thank you very much for reading Haihong's article , If there are mistakes in the text , You are welcome to point out ~
ha-ha Introduce yourself
nickname : Sea boom
label : There's a program 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 !
Everyday sharing : WeChat official account 【 Sea boom Pro】 Record life 、 Learning , Share some source code or learning materials , Welcome to your attention ~

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: #263238;
}
section {

width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid red;
}
span {

width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
position: relative;
color: white;
left: -100px;
/* background-color: red; */
animation: loading 4s linear infinite;
}
@keyframes loading {

0% {

box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
12% {

box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
25% {

box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
36% {

box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);
}
50% {

box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);
}
62% {

box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);
}
75% {

box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);
}
87% {

box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);
}
100% {

box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
}
}

The principle,

step 1

Use span label , Set to

  • Width 、 The height is 20px
  • Fillet
  • The background color is red
 width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
background-color: red;

The renderings are as follows

 Insert picture description here

step 2

Move the ball to the left 100px

left: -100px;

The renderings are as follows

 Insert picture description here

step 3

by span Add animation

Use box-shadow Shadows act as White ball

The white ball has four

The key is 9 frame

First frame

  • Four little white balls ( That is to say span Shadow ) All located in span initial position , That's where the red ball is

  • All colors are rgba(255, 255, 255, 0)( white , But the transparency level is 0, Visually invisible )

box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

The renderings are as follows

 Insert picture description here

Second frame

  • Pellet 1 Move to the right of the red ball 100px It's about , The color changes to rgba(255, 255, 255, 1)( Pure white )

  • The rest of the balls are in the same position

box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

The renderings are as follows

 Insert picture description here

Frame 3

  • Pellet 1 And then to the right 20px( The diameter and length of a small ball )

  • Pellet 2 Move from the initial position to the right side of the red ball 100px It's about ( In the second frame, the ball 1 Where it is )

  • Pellet 1、2 All colors are rgba(255, 255, 255, 1)( Pure white )

  • The rest of the balls don't change

 box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

The renderings are as follows

 Insert picture description here

The fourth frame

  • Pellet 1 And then to the right 20px( The diameter and length of a small ball )

  • Pellet 2 And then to the right 20px

  • Pellet 3 Move from the initial position to the right side of the red ball 100px It's about ( That's the third frame, little ball 2 Where it is )

  • Pellet 1、2、3 All colors are rgba(255, 255, 255, 1)( Pure white )

 box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);

The renderings are as follows

 Insert picture description here

Frame five

  • Pellet 1 And then to the right 20px( The diameter and length of a small ball )

  • Pellet 2 And then to the right 20px

  • Pellet 3 And then to the right 20px

  • Pellet 4 Move from the initial position to the right side of the red ball 100px It's about ( That's frame four, little ball 3 Where it is )

  • Pellet 1、2、3、4 All colors are rgba(255, 255, 255, 1)( Pure white )

box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);

The renderings are as follows

 Insert picture description here

Frame six

  • Pellet 1 Then move directly to the right of the red ball 200px( To form symmetry )

 Insert picture description here

  • The color changes to rgba(255, 255, 255, 0)( white , But the transparency level is 0, It's out of sight )

  • Pellet 2、3、4 Move to the right again 20px( The diameter of a small ball )

 box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);

The renderings are as follows

 Insert picture description here

The seventh frame

  • Pellet 1 Stay at frame six ( Red ball right side 200px It's about )

  • Pellet 2 Move to the ball 1 The location of , The color changes to rgba(255, 255, 255, 0)

  • Pellet 3、4 To the right 20px

 box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);

The renderings are as follows

 Insert picture description here

Frame eight

  • Pellet 1、2 Stay on the right side of the red ball 200px It's about

  • Pellet 3 Move to the ball 1、2 The location of , The color changes to rgba(255, 255, 255, 0)

  • Pellet 4 To the right 20px

 box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);

The renderings are as follows

 Insert picture description here

Frame nine

  • Pellet 4 And finally to the right of the red ball 200px It's about , The color becomes transparent
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);

The renderings are as follows
 Insert picture description here

Use between frames linear Smooth transition of speed curve

Sum up , The animation code is

 animation: loading 4s linear infinite;
/* Animation to achieve */
@keyframes loading {

/* First frame */
0% {

box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
/* Second frame */
12% {

box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
/* Frame 3 */
25% {

box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
}
/* The fourth frame */
36% {

box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);
}
/* Frame five */
50% {

box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);
}
/* Frame six */
62% {

box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);
}
/* The seventh frame */
75% {

box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);
}
/* Frame eight */
87% {

box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);
}
/* Frame nine */
100% {

box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
}
}

The renderings are as follows

 Insert picture description here

step 4

Comment out span Background color of ( Cancel the red )

The renderings are as follows

 Insert picture description here

Conclusion

Source of learning :

https://codepen.io/bhadupranjal/pen/vYLZYqQ

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'm Haihong ଘ(੭ˊᵕˋ)੭, If you think it's ok , Please like it

Writing is not easy to ,「 give the thumbs-up 」+「 Collection 」+「 forward 」

Thank you for your support ️

 Insert picture description here

版权声明
本文为[Haihong Pro]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210504142243479w.html

  1. Two way linked list: I'm no longer one-way driving
  2. Vue event and form processing
  3. Reactive TraderCloud实时外汇开源交易平台
  4. Reactive tradercloud real time foreign exchange open source trading platform
  5. Node.js REST API的10个最佳实践
  6. Ten best practices of node.js rest API
  7. Fiddler advanced usage
  8. Process from Vue template to render
  9. Promise up (asynchronous or synchronous)
  10. Principle and implementation of promise
  11. Vs code plug in sharing - run code
  12. Vue practical notes (1) introduction of Ant Design
  13. Vue actual combat notes (2) introduction of element plus
  14. Introduction to webpack
  15. Webpack construction process
  16. Vue notes
  17. The experience and lessons of moving from ruby megalith architecture to go microservice
  18. Using leancloud to add artitalk module to hexo blog
  19. Implementation of chrome request filtering extension
  20. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]
  21. Gallop workflow engine design series 01 process element design
  22. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  23. Vue Mobile Music App learning [16]: player lyrics display development
  24. jquery cookie
  25. jquery cookie
  26. 体面编码之JavaScript
  27. JavaScript for decent coding
  28. React17 系统精讲 结合TS打造旅游电商平台
  29. React17 system combined with TS to build tourism e-commerce platform
  30. 2021-05-04 hot news
  31. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  32. gRPC-Web:替代REST的gRPC的Javascript库包
  33. The relationship between httpsession object and cooike and the construction of cookie object
  34. Grpc Web: a JavaScript library package to replace rest grpc
  35. Building reactive rest API with Java - kalpa Senanayake
  36. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  37. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  38. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  39. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  40. Vue.js比jQuery更容易学习
  41. Node.js的Reactor模式 与异步编程
  42. Vue. JS is easier to learn than jQuery
  43. Reactor mode of node.js and asynchronous programming
  44. 详解JavaScript中的正则表达式
  45. Explain regular expressions in JavaScript
  46. 详解JavaScript中的正则表达式
  47. Explain regular expressions in JavaScript
  48. JS: closure
  49. Write your own promise in promises / A + specification
  50. Analysis of the core mechanism of webpack from loader, plugin to egg
  51. On the import and export of webpack
  52. Interpretation of lodash source code (2)
  53. Hexo series (5) writing articles
  54. 有人用过JMeter或用HttpUnit写过测试吗????
  55. Has anyone ever used JMeter or written tests in httpUnit????
  56. JavaScript异步编程4——Promise错误处理
  57. Leetcode 1846. Reduce and rearrange the largest element of an array
  58. JavaScript asynchronous programming 4 -- promise error handling
  59. SQLite是一种经典的无服务器Serverless
  60. 通过Spring Boot Webflux实现Reactor Kafka