「HTML+CSS」自定义加载动画【048】

海轰Pro 2021-05-04 14:23:28
html css Html+CSS 自定义 自定


前言

Hello!小伙伴!
首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
哈哈 自我介绍一下
昵称:海轰
标签:程序猿一只|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
日常分享:微信公众号【海轰Pro】记录生活、学习点滴,分享一些源代码或者学习资料,欢迎关注~

效果展示

在这里插入图片描述

Demo代码

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 : 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
position: relative;
color: white;
/* background-color: red; */
animation: loading 2s linear infinite;
}
@keyframes loading {

0% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
25% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 2px
}
50% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 2px, -78px 0 0 -2px
}
75% {
 box-shadow: 26px 0 0 2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
100% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
}

原理详解

步骤1

使用span标签,设置为

  • 宽度、高度均为24px
  • 背景色:红色
    在这里插入图片描述

步骤2

span标签圆角化

border-radius: 50%;

在这里插入图片描述

步骤3

为span添加动画

使用box-shadow充当白色小球

关键有五帧

第一帧

  • 初始位置
  • 分别利用box-shadow定义四个白色小球(span的阴影)
  • 分别位于红色小球的左右方
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px;

效果图如下

在这里插入图片描述

第二帧

将最左边小球变大,其余不变

 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 2px;

效果图如下
在这里插入图片描述

第三帧

将左边第二个小球变大,其余不变

 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 2px, -78px 0 0 -2px;

效果图如下
在这里插入图片描述

第四帧

将左边第三个小球变大,其余不变

 box-shadow: 26px 0 0 2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px

效果图如下
在这里插入图片描述

第五帧

将左边第四个小球变大,其余不变

 box-shadow: 26px 0 0 -2px, 78px 0 0 2px,
-26px 0 0 -2px, -78px 0 0 -2px;

效果图如下

在这里插入图片描述
最后再注释掉span的背景色即可

综上描述

代码为

 animation: loading 2s linear infinite;
@keyframes loading {

0% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
25% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 2px
}
50% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 2px, -78px 0 0 -2px
}
75% {
 box-shadow: 26px 0 0 2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
100% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
}

效果图如下

在这里插入图片描述

结语

学习来源:

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

文章仅作为学习笔记,记录从0到1的一个过程。希望对您有所帮助,如有错误欢迎小伙伴指正~

我是海轰ଘ(੭ˊᵕˋ)੭,如果您觉得写得可以的话,请点个赞吧

写作不易,「点赞」+「收藏」+「转发」

谢谢支持️

在这里插入图片描述

版权声明
本文为[海轰Pro]所创,转载请带上原文链接,感谢
https://haihong.blog.csdn.net/article/details/115916931

  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