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

海轰Pro 2021-04-08 10:49:50
html css Html+CSS 自定义 自定


前言

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

效果展示

在这里插入图片描述

思路

这里用span元素代表外层白色圆圈

两个红色小球分别用span的两个伪类::before和::after代表

根据效果图,可以大概得出思路

  • 先利用span生成一个正方形,设置好边框
  • 两个伪类元素为绝对定位,分别位于正方形的左上和右下
  • 然后分别对其进行圆角处理
  • 最后添加旋转动画即可

Demo代码

HTML

<!DOCTYPE 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 : 96px;
height: 96px;
border: 10px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: rotation 2s linear infinite;
}
span::before{
position: absolute;
content: '';
top: 15px;
left: 15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
span::after{
position: absolute;
content: '';
bottom: 15px;
right: 15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}
}

原理详解

步骤1

将span元素设置为

  • 一个96️96px的正方形
  • 边框为10px,白色,solid
 width : 96px;
height: 96px;
border: 10px solid #fff;

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

步骤2

span::before和span::after设置

  • 宽度、高度均为20px
  • 绝对定位,其中before位于左上,after位于右下
  • 背景色为红色
/* before的设置*/
position: absolute;
content: '';
top: 0;
left: 0;
width: 20px;
height: 20px;
background: red;
/*after的设置*/
position: absolute;
content: '';
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: red;

效果图如下

在这里插入图片描述

步骤3

稍微向正方形中心移动下::before和::after

/* before的设置*/
top: 15px;
left: 15px;
/*after的设置*/
bottom: 15px;
right: 15px;

效果图如下

在这里插入图片描述

步骤4

对span、span::before、span::after设置圆角

border-radius: 50%;

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

步骤7

为span添加动画

animation: rotation 1s linear infinite;
/*动画实现*/
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}

效果图如下

在这里插入图片描述

结语

学习来源:

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

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

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

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

谢谢支持️

在这里插入图片描述

版权声明
本文为[海轰Pro]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/haihongpro/p/14630846.html

  1. Scheme and implementation of front end page watermarking
  2. Why is 0.1 + 0.2 not equal to 0.3?
  3. JS arrow function this points to related practice
  4. CSS text decoration & text emphasis
  5. 2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街
  6. 大前端
  7. The first compulsory CSS architecture system in 2021
  8. Big front end
  9. 你喜欢才是最好的,前端工程师常用的8个工具
  10. What you like is the best. There are 8 common tools used by front-end engineers
  11. Spring Boot + Vue3 前后端分离 实战wiki知识库系统
  12. Spring boot + vue3 front end and back end separation practical wiki knowledge base system
  13. CSS高级技巧总结
  14. CSS advanced skills summary
  15. HTML5教程 - HTML5 事件
  16. HTML5 tutorial - HTML5 events
  17. Vue和微信小程序的区别
  18. The difference between Vue and wechat applet
  19. HTML5和CSS3提高
  20. Improvement of HTML5 and CSS3
  21. HTML5和CSS3提高
  22. Improvement of HTML5 and CSS3
  23. NMN concept stock up and down limit, Harvard & 34; ageless drug & 34; only market speculation?
  24. 「HTML+CSS」--自定义加载动画【011】
  25. 「HTML+CSS」--自定义加载动画【010】
  26. 「HTML+CSS」--自定义加载动画【009】
  27. 「HTML+CSS」--自定义加载动画【008】
  28. "HTML + CSS" -- custom loading animation [011]
  29. "Custom" animation [CSS + 010]
  30. "HTML + CSS" -- custom loading animation [009]
  31. "HTML + CSS" -- custom loading animation [008]
  32. HttpServletRequest、通过request获得请求头、请求体等、解决中文乱码等问题
  33. HttpServletRequest, obtaining request header and request body through request, solving Chinese garbled code and other problems
  34. html2canvas 识别 svg 解决方案
  35. Solution of identifying SVG with html2canvas
  36. Web前端架构师
  37. Web front end architect
  38. 3000 yuan of financial software is less than 28 yuan of system, and the automatic accounting system is comparable to artifact
  39. Blessing of the sea
  40. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
  41. Summary and exercises of CSS3 in HTML5 course of it Brothers Company
  42. It's disassembled before it's on the market. The workmanship of Xiaomi 10 is unexpected, reducing maintenance costs?
  43. Vue自学之路5-vue模版语法(v-text,v-html,v-pre)
  44. Vue self learning 5-vue template syntax (v-text, v-html, v-pre)
  45. 【HTML】处理&lt;br&gt;换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法,字符串中包含HTML标签被转义的问题 解决
  46. [HTML] processing & lt; BR & gt; the problem of invalid line feed when the line feed character is added to the front end --- the processing method of invalid HTML tag contained in the rendered string in HTML, and the problem of escape of HTML tag containe
  47. Vue自学之路5-vue模版语法(v-text,v-html,v-pre)
  48. Vue self learning 5-vue template syntax (v-text, v-html, v-pre)
  49. 7个Web前端程序员必须会用CSS技巧
  50. 10个优秀开源JavaScript模板引擎
  51. JavaScript基础知识及写法
  52. FB大规模重构React Native,Airbnb宣布回归原生,前端巨变来临?
  53. Seven web front-end programmers must be able to use CSS skills
  54. 10 excellent open source JavaScript template engines
  55. Basic knowledge and writing method of JavaScript
  56. FB large scale reconstruction react native, airbnb announced return to the original, the front-end changes coming?
  57. 网页HTML5视频播放器(兼容各主流浏览器)
  58. Web HTML5 video player (compatible with mainstream browsers)
  59. 前端开发需要掌握哪些技术?前端开发都学什么?
  60. 一本关于HTTP的恋爱日记