【CSS】使用css实现一个loading效果

我就是我 2022-03-10 04:36 321阅读 0赞

<style>
        body {
          padding: 200px;
          position: relative;
        }
    
        .load::before, .load::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          margin: auto;
          width: 0;
          height: 0;
          border-radius: 50%;
          background-color: black;
          animation: 1.3s loading infinite linear
        }
        .load::after {
          animation-delay: .75s;
         
        }
    
        @keyframes loading {
          from {
            width: 0;
            height: 0;
            opacity: 1;
          }
    
          to {
            width: 60px;
            height: 60px;
            opacity: 0;
          }
        }
      </style>
    </head>
    
    <body>
      <div class="load">
    
      </div>
    </body>

效果如下：  
![在这里插入图片描述][20190309155758226.gif]

[20190309155758226.gif]: /images/20220310/c7f08bf29e244c0d940ca389e56d0865.png

发表评论取消回复

表情：

评论列表（有 0 条评论，321人围观）

还没有评论，来说两句吧...

相关阅读

相关简单的 HTML + CSS Loading 效果

简单的 HTML + CSS Loading 效果先看结果HTML<body> <div class="loading"> <spa...

左手的ㄟ右手/ 2024年05月24日 04:20/ 0 赞/ 73 阅读

相关如何使用CSS实现一个3D旋转效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 3D效果实现 ⭐ 写在最后 -------------------- ⭐ 专栏简介前端入门之旅：

╰+哭是因爲堅強的太久メ/ 2023年10月15日 09:28/ 0 赞/ 36 阅读

相关如何使用CSS实现一个拖拽排序效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 实现拖拽排序效果的CSS和JavaScript示例 ⭐ HTML 结构 ⭐ CSS 样式 (style

亦凉/ 2023年10月15日 07:46/ 0 赞/ 136 阅读

相关如何使用CSS实现一个平滑过渡效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 使用CSS实现平滑过渡效果 ⭐ 写在最后 -------------------- ⭐ 专栏简介

╰+哭是因爲堅強的太久メ/ 2023年10月14日 21:30/ 0 赞/ 19 阅读

相关如何使用CSS实现一个渐变背景效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 使用CSS实现渐变背景效果 ⭐ 线性渐变（Linear Gradient） ⭐ 径向渐变（Radial

清疚/ 2023年10月14日 20:46/ 0 赞/ 28 阅读

相关 css实现一个Loading效果

<div class="load"> <span></span> <sp

水深无声/ 2022年10月23日 14:22/ 0 赞/ 239 阅读

相关 html css实现win8,通过CSS3实现win8的Loading效果

数据加载中请稍后 .loading-msg\{color: red; font:normal 24px/50px "Microsoft YaHei"; text-align:

阳光穿透心脏的1/2处/ 2022年10月09日 00:53/ 0 赞/ 161 阅读

相关使用css实现扫描效果

实现下图中的扫描效果 ![请添加图片描述][d9215c7cfd4742bdb39ccac6bcbe4ba1.gif] 需求分析 1.扫描图层有一个宽度为0增加到

r囧r小猫/ 2022年09月11日 08:20/ 0 赞/ 247 阅读

相关纯CSS实现的Loading效果

纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的[codepen][]看看效果。效果下载链接文章下面。 ![SouthEast][]

￡神魔★判官ぃ/ 2022年08月25日 05:22/ 0 赞/ 296 阅读

相关【CSS】使用css实现一个loading效果

<style> body { padding: 200px; position: relative;

我就是我/ 2022年03月10日 04:36/ 0 赞/ 322 阅读