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

海轰Pro 2021-04-08 02:12:14
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 : 96px;
height: 96px;
border: 10px solid transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-bottom-color: #FF3D00;
border-top-color: #FF3D00;
animation: rotation 1s linear infinite;
}
span::after{

position: relative;
content: '';
display: inline-block;
width: 72px;
height: 72px;
border-radius: 50%;
border: 10px solid transparent;
border: 10px solid #fff;
}
@keyframes rotation {

0% {
 transform: rotate(0deg) }
100% {
 transform: rotate(360deg)
}
}

原理解释

动画的核心部分就是span和span::after,section仅作为提示框。

步骤1

将span元素设置为

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

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

步骤2

span::after伪元素设置为:

  • 位于span正中
  • 边长72️72px的正方形

注:红色部分即为span::after,为便于观察才设置为红色
在这里插入图片描述

步骤3

span::after设置

  • 边框:10px 白色 solid
 border: 10px solid white;

注:

  • 此时的span::after变成了变成(72+10+10)px 的正方形
    在这里插入图片描述

步骤4

span

  • 下边框设置为红色
  • 上边框设置为红色
border-bottom-color: #FF3D00;
border-top-color: #FF3D00;

效果图如下

在这里插入图片描述

步骤5

span和span::after

  • 圆角设置:50%
border-radius: 50%;

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

步骤6

span

  • 四边框颜色为透明
border: 10px solid transparent;

在这里插入图片描述

步骤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://haihong.blog.csdn.net/article/details/115431861

  1. The difference between pseudo class and pseudo class elements
  2. [CSS effect] simple drop-down menu
  3. [Vue] value transfer by parent-child component
  4. 【css】设置table表格边框样式
  5. 【css】修改input,textarea中的placeholder样式
  6. vue-router的两种模式(hash和history)及区别
  7. CSS3的滤镜filter属性
  8. [CSS] set table border style
  9. [CSS] modify the placeholder style in input and textarea
  10. Two modes of Vue router (hash and History) and their differences
  11. Filter property of CSS3
  12. 全局安装gulp 报错问题解决
  13. Solution of error report in global installation of gulp
  14. 18个好用的自定义react hook
  15. 你应该知道的常用服务器HTTP状态码?
  16. 18 user defined react hooks
  17. What HTTP status codes should you know about common servers?
  18. 手把手教你打造属于自己团队的前端小报系统
  19. Hand in hand to teach you to build your own front-end tabloid system
  20. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?
  21. vue cli4.0 快速搭建项目详解
  22. Vue cli4.0 quick build project
  23. vue-cli脚手架安装
  24. Installation of Vue cli scaffold
  25. [JS knowledge] method of getting elements from DOM
  26. 【jQuery效果】文字滚动
  27. [jQuery effect] text scrolling
  28. [front end] live broadcast of user experience optimization series, real-life sharing of front-line celebrities
  29. React native introduces third party Android SDK
  30. Using html2canvas to generate shared images, CDN images do not show the problem
  31. Using hooks to write react components
  32. Explain the module hot replacement function of webpack in detail
  33. An incomplete guide to writing a simple native wechat applet
  34. How JavaScript calculates 1 + 1 - Part 1 creates a source string
  35. Jsonp method to solve cross domain problems
  36. Canvas animation demo (from zero to one)
  37. El dialog of elementui component encapsulation
  38. Transition group of Vue source code
  39. When encountering bracket validity, next larger element, specific minimum value, try stack
  40. Vue3 virtual DOM
  41. Scheme and implementation of front end page watermarking
  42. Why is 0.1 + 0.2 not equal to 0.3?
  43. JS arrow function this points to related practice
  44. CSS text decoration & text emphasis
  45. 2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街
  46. 大前端
  47. The first compulsory CSS architecture system in 2021
  48. Big front end
  49. 你喜欢才是最好的,前端工程师常用的8个工具
  50. What you like is the best. There are 8 common tools used by front-end engineers
  51. Spring Boot + Vue3 前后端分离 实战wiki知识库系统
  52. Spring boot + vue3 front end and back end separation practical wiki knowledge base system
  53. CSS高级技巧总结
  54. CSS advanced skills summary
  55. HTML5教程 - HTML5 事件
  56. HTML5 tutorial - HTML5 events
  57. Vue和微信小程序的区别
  58. The difference between Vue and wechat applet
  59. HTML5和CSS3提高
  60. Improvement of HTML5 and CSS3