先制作一个正方形，让圆点在正方形的最外侧

  1. <style>
  2. body {
  3.     margin: 0;
  4. }
  5. .loading {
  6.     width: 200px;
  7.     height: 200px;
  8.     background: skyblue;
  9.     margin: 100px auto 0px;
  10.     position: relative;
  11. }
  13. .loading .item {
  14.     width: 20px;
  15.     height: 20px;
  16.     border-radius: 50%;
  17.     background: pink;
  18.     position: absolute;
  19.     /* left：50%是指的左边的点的位置在中间 第一个圆点在最顶部 */
  20.     left: 50%;
  21.     top: 0px;
  22.     margin-left: -10px;
  23.     /* 基准点 */
  24.     transform-origin: 10px 100px;
  25. }
  26. //第二个圆点
  27. .loading .item:nth-child(2) {
  28.     transform: rotate(40deg);
  29. }
  30. //第三个圆点
  31. .loading .item:nth-child(3) {
  32.     transform: rotate(80deg);
  33. }
  34. </style>
  36. <body>
  37.     <div class="loading">
  38.         <div class="item"></div>
  39.         <div class="item"></div>
  40.         <div class="item"></div>
  41.         <div class="item"></div>
  42.         <div class="item"></div>
  43.         <div class="item"></div>
  44.         <div class="item"></div>
  45.         <div class="item"></div>
  46.         <div class="item"></div>
  47.     </div>
  48. </body>

借助 rotate 让9个圆点在正方形的四周

  1. <style>
  2.     body {
  3.         margin: 0;
  4.     }
  5.     .loading {
  6.         width: 200px;
  7.         height: 200px;
  8.         background: skyblue;
  9.         margin: 100px auto 0px;
  10.         position: relative;
  11.     }
  12.     .loading .item {
  13.         width: 20px;
  14.         height: 20px;
  15.         border-radius: 50%;
  16.         background: pink;
  17.         position: absolute;
  18.         /* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
  19.         left: 50%;
  20.         top: 0px;
  21.         margin-left: -10px;
  22.         /* 基准点 */
  23.         transform-origin: 10px 100px;
  24.     }
  25.     .loading .item:nth-child(2) {
  26.         transform: rotate(40deg);
  27.     }
  29.     .loading .item:nth-child(3) {
  30.         transform: rotate(80deg);
  31.     }
  32.     /* 以此类推 快速做出其他的圆点 */
  34.     .loading .item:nth-child(4) {
  35.         transform: rotate(120deg);
  36.     }
  38.     .loading .item:nth-child(5) {
  39.         transform: rotate(160deg);
  40.     }
  42.     .loading .item:nth-child(6) {
  43.         transform: rotate(200deg);
  44.     }
  46.     .loading .item:nth-child(7) {
  47.         transform: rotate(240deg);
  48.     }
  50.     .loading .item:nth-child(8) {
  51.         transform: rotate(280deg);
  52.     }
  54.     .loading .item:nth-child(9) {
  55.         transform: rotate(320deg);
  56.     }
  57. </style>

优化代码

  1. 上面我们给每一个点都设置了旋转的角度。
  2. 这样觉得很low、都在重复。如果点很多，那不是要累死我们呀。
  3. 怎么解决这个问题了？我们可以使用css的变量来解决这个问题。
  4. 我们可以可以使用自定义属性来处理这个问题的。自定义属性是以"--"开头。

使用自定义属性"--" 来优化代码

  1. <style>
  2. body {
  3.     margin: 0;
  4. }
  6. .loading {
  7.     width: 200px;
  8.     height: 200px;
  9.     background: skyblue;
  10.     margin: 100px auto 0px;
  11.     position: relative;
  12. }
  14. .loading .item {
  15.     width: 20px;
  16.     height: 20px;
  17.     border-radius: 50%;
  18.     background: pink;
  19.     position: absolute;
  20.     /* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
  21.     left: 50%;
  22.     top: 0px;
  23.     margin-left: -10px;
  24.     /* 基准点 */
  25.     transform-origin: 10px 100px;
  26.     /* calc 函数可以进行运算*/
  27.     transform: rotate(calc(var(--i)*40deg));
  28. }
  29. </style>
  31. <div class="loading">
  32.     <!-- 自定义属性是通过"--"来命名的 -->
  33.     <div class="item" style="--i:0"></div>
  34.     <div class="item" style="--i:1"></div>
  35.     <div class="item" style="--i:2"></div>
  36.     <div class="item" style="--i:3"></div>
  37.     <div class="item" style="--i:4"></div>
  38.     <div class="item" style="--i:5"></div>
  39.     <div class="item" style="--i:6"></div>
  40.     <div class="item" style="--i:7"></div>
  41.     <div class="item" style="--i:8"></div>
  42. </div>

让每个一个小圆点间隔一段时间亮起来

  1. <style>
  2.     body {
  3.         margin: 0;
  4.     }
  6.     .loading {
  7.         width: 200px;
  8.         height: 200px;
  9.         background: pink;
  10.         margin: 100px auto 0px;
  11.         position: relative;
  12.     }
  14.     .loading .item {
  15.         width: 20px;
  16.         height: 20px;
  17.         border-radius: 50%;
  18.         background: rgba(255, 255, 255, .2);
  19.         position: absolute;
  20.         /* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
  21.         left: 50%;
  22.         top: 0px;
  23.         margin-left: -10px;
  24.         /* 基准点 */
  25.         transform-origin: 10px 100px;
  26.         /* calc 函数可以进行运算*/
  27.         transform: rotate(calc(var(--i)*40deg));
  28.         /* 调用动画 */
  29.         animation: loading 2s ease infinite;
  30.     }
  32.     @keyframes loading {
  33.         0%,
  34.         50% {
  35.             background: rgba(255, 255, 255, .2);
  36.         }
  37.         50.5%,
  38.         100% {
  39.             background: #fff;
  40.         }
  41.     }
  43.     .loading .item:nth-child(1) {
  44.         animation-delay: 0s;
  45.     }
  47.     .loading .item:nth-child(2) {
  48.         animation-delay: 0.111s;
  49.     }
  51.     .loading .item:nth-child(3) {
  52.         animation-delay: 0.222s;
  53.     }
  54.     /* 以此类推 快速做出其他的圆点 */
  56.     .loading .item:nth-child(4) {
  57.         animation-delay: 0.333s;
  58.     }
  60.     .loading .item:nth-child(5) {
  61.         animation-delay: 0.444s;
  62.     }
  64.     .loading .item:nth-child(6) {
  65.         animation-delay: 0.555s;
  66.     }
  68.     .loading .item:nth-child(7) {
  69.         animation-delay: 0.666s;
  70.     }
  72.     .loading .item:nth-child(8) {
  73.         animation-delay: 0.777s;
  74.     }
  76.     .loading .item:nth-child(9) {
  77.         animation-delay: 0.888s;
  78.     }
  79. </style>
  80. </head>
  82. <body>
  83. <div class="loading">
  84.     <!-- 自定义属性是通过"--"来命名的 -->
  85.     <div class="item" style="--i:0"></div>
  86.     <div class="item" style="--i:1"></div>
  87.     <div class="item" style="--i:2"></div>
  88.     <div class="item" style="--i:3"></div>
  89.     <div class="item" style="--i:4"></div>
  90.     <div class="item" style="--i:5"></div>
  91.     <div class="item" style="--i:6"></div>
  92.     <div class="item" style="--i:7"></div>
  93.     <div class="item" style="--i:8"></div>
  94. </div>
  95. </body>

同样优化代码

  1. <style>
  2. body {
  3.     margin: 0;
  4. }
  6. .loading {
  7.     width: 200px;
  8.     height: 200px;
  9.     background: pink;
  10.     margin: 100px auto 0px;
  11.     position: relative;
  12. }
  14. .loading .item {
  15.     width: 20px;
  16.     height: 20px;
  17.     border-radius: 50%;
  18.     background: rgba(255, 255, 255, .2);
  19.     position: absolute;
  20.     /* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
  21.     left: 50%;
  22.     top: 0px;
  23.     margin-left: -10px;
  24.     /* 基准点 */
  25.     transform-origin: 10px 100px;
  26.     /* calc 函数可以进行运算*/
  27.     transform: rotate(calc(var(--i)*40deg));
  28.     /* 调用动画 */
  29.     animation: loading 2s ease infinite;
  30.     animation-delay: calc(var(--i) * 0.11s);
  31. }
  33. @keyframes loading {
  34.     0%,
  35.     50% {
  36.         background: rgba(255, 255, 255, .2);
  37.     }
  38.     50.5%,
  39.     100% {
  40.         background: #fff;
  41.     }
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div class="loading">
  47.     <!-- 自定义属性是通过"--"来命名的 -->
  48.     <div class="item" style="--i:0"></div>
  49.     <div class="item" style="--i:1"></div>
  50.     <div class="item" style="--i:2"></div>
  51.     <div class="item" style="--i:3"></div>
  52.     <div class="item" style="--i:4"></div>
  53.     <div class="item" style="--i:5"></div>
  54.     <div class="item" style="--i:6"></div>
  55.     <div class="item" style="--i:7"></div>
  56.     <div class="item" style="--i:8"></div>
  57. </div>
  58. </body>

css3写一个加载动画的更多相关文章

  1. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  2. 源码分享-纯CSS3实现齿轮加载动画

    纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html

  3. [前端随笔][CSS] 制作一个加载动画 即帖即用

    说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...

  4. 原生JS+ CSS3创建loading加载动画；

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  5. css3很酷的加载动画多款

    在线实例:http://www.admin10000.com/document/3601.html 源码:https://github.com/tobiasahlin/SpinKit

  6. css3动画特效：纯css3制作win8加载动画特效

    Windows 8     完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下:   css特效代码: <style type="text/css"> ...

  7. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  8. 几行css3代码实现超炫加载动画

    之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览   源码下载 实现代码: 极简的html代码: <div> ...

  9. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  10. HTML加载动画实现

    在页面加载完成之前或者执行某操作时,先显示要显示的加载动画. 实现原理 先定义一个加载动画元素(最好是纯CSS实现,图片的话可能慢一点),当页面未加载完成之前,先使其"可见",当页 ...

随机推荐

  1. 边缘AI方案落地问题探讨

    摘要:本文介绍了如何兑现边缘AI带来好处的承诺,并针对边缘AI落地和商业闭环发起的开源社区工作. 本文分享自华为云社区<华为云:边缘AI方案落地问题探讨及调研>,作者: 华为云边缘云创新实 ...

  2. You are not using binary logging

    Error Code : 1381You are not using binary logging show variables like '%log_bin%'; 在mysqld配置项下面加上log ...

  3. Django中安装websocket

    完整代码: https://gitee.com/mom925/django-system项目结构: 先安装所需库: pip install channels下面将websocket作为插件一样的只需要 ...

  4. Q查询进阶操作 ORM查询优化 only与defer select_related与prefetch_related ORM事务 ORM常用字段类型 ORM常用字段参数

    目录 Q查询进阶操作 children.append 图书查询功能 ORM查询优化 惰性查询 自动分页 limit only与defer only defer select_related与prefe ...

  5. Android RxJava 异常时堆栈信息显示不全（不准确），解决方案都在这里了

    现象 大家好,我是徐公,今天为大家带来的是 RxJava 的一个血案,一行代码 return null 引发的. 前阵子,组内的同事反馈说 RxJava 在 debug 包 crash 了,捕获到的异 ...

  6. 基于 SpringBoot+vue的地方美食系统，可作为毕业设计

    1 简介 这个项目是基于 SpringBoot和 Vue 开发的地方美食系统,包括系统功能模块,管理员功能模块,用户管理模块,功能齐全,可以作为毕业设计,课程设计等.源码下载下来,进行一些简单的部署, ...

  7. ElasticSearch 精确查询统计

    ElasticSearch 精确查询统计 match_phrase:短语匹配,不分词 GET logback-2022-08/_search { "size": 1, //显示1条 ...

  8. @Scheduled cron 定时任务表达式含义，及* ?的区别

    好多网友对@Scheduled cron表达式含义做了阐述,个人认为很多对于 * ?的说明不够具体也不算准确,借此本文特别对 * ?做一下说明. cron格式:[秒数][分钟][小时][日期][月份] ...

  9. POJ 3259 Wormholes（bellman_ford、Floyd、SPFA判断负环）

    POJ 3259 http://poj.org/problem?id=3259 题意: 农夫 FJ 有 N 块田地[编号 1...n] (1<=N<=500) 田地间有 M 条路径 [双向 ...

  10. 【每日一题】31.「土」秘法地震 (二维前缀和 / DP)

    补题链接:Here 题意就是要找每一个 \(k * k\) 的小正方形里至少有一个1的数量 显然我们可以通过二维前缀和处理出(1, 1) 到 (n, m) 的数量 然后通过枚举处理出答案,具体思想是容 ...