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

海轰Pro 2021-04-08 02:12:12
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

css只会一点点,学习之余从喜欢看一些大神级别的css效果展示,根据源码一点一点学习知识点,文中有不对的地方,欢迎指出~

在这里插入图片描述

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

  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