经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
「HTML+CSS」--自定义加载动画【010】
来源:cnblogs  作者:海轰Pro  时间:2021/4/12 9:38:19  对本文有异议

前言

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

效果展示

在这里插入图片描述

思路

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

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

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

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

Demo代码

HTML

  1. <!DOCTYPE html>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" href="style.css">
  9. <title>Document</title>
  10. </head>
  11. <body>
  12. <section><span></span></section>
  13. </body>
  14. </html>

CSS

  1. html,body{
  2. margin: 0;
  3. height: 100%;
  4. }
  5. body{
  6. display: flex;
  7. justify-content: center;
  8. align-items: center;
  9. background: #263238;
  10. }
  11. section {
  12. width: 650px;
  13. height: 300px;
  14. padding: 10px;
  15. position: relative;
  16. display: flex;
  17. align-items: center;
  18. justify-content: center;
  19. /* 红色边框仅作提示 */
  20. border: 2px solid red;
  21. }
  22. span{
  23. width : 96px;
  24. height: 96px;
  25. border: 10px solid white;
  26. border-radius: 50%;
  27. display: flex;
  28. align-items: center;
  29. justify-content: center;
  30. position: relative;
  31. animation: rotation 2s linear infinite;
  32. }
  33. span::before{
  34. position: absolute;
  35. content: '';
  36. top: 15px;
  37. left: 15px;
  38. width: 20px;
  39. height: 20px;
  40. background: red;
  41. border-radius: 50%;
  42. }
  43. span::after{
  44. position: absolute;
  45. content: '';
  46. bottom: 15px;
  47. right: 15px;
  48. width: 20px;
  49. height: 20px;
  50. background: red;
  51. border-radius: 50%;
  52. }
  53. @keyframes rotation {
  54. 0% { transform: rotate(0deg) }
  55. 100% { transform: rotate(360deg)
  56. }
  57. }

原理详解

步骤1

将span元素设置为

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

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

步骤2

span::before和span::after设置

  • 宽度、高度均为20px
  • 绝对定位,其中before位于左上,after位于右下
  • 背景色为红色
  1. /* before的设置*/
  2. position: absolute;
  3. content: '';
  4. top: 0;
  5. left: 0;
  6. width: 20px;
  7. height: 20px;
  8. background: red;
  9. /*after的设置*/
  10. position: absolute;
  11. content: '';
  12. bottom: 0;
  13. right: 0;
  14. width: 20px;
  15. height: 20px;
  16. background: red;

效果图如下

在这里插入图片描述

步骤3

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

  1. /* before的设置*/
  2. top: 15px;
  3. left: 15px;
  4. /*after的设置*/
  5. bottom: 15px;
  6. right: 15px;

效果图如下

在这里插入图片描述

步骤4

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

  1. border-radius: 50%;

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

步骤7

为span添加动画

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

效果图如下

在这里插入图片描述

结语

学习来源:

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

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

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

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

谢谢支持??

在这里插入图片描述
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=hclw6x6lvkci

原文链接:http://www.cnblogs.com/haihongpro/p/14630846.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号