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

我就是我 2022-03-10 04:36 294阅读 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 条评论，294人围观）

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

相关阅读

相关简单的 HTML + CSS Loading 效果

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

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

相关使用css动画实现loding效果

代码如下： <!doctype html> <html> <head> <meta charset="ulf-8"> <tit

小咪咪/ 2022年12月13日 14:06/ 0 赞/ 179 阅读

相关 css实现一个Loading效果

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

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

相关 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 赞/ 143 阅读

相关使用css实现扫描效果

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

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

相关纯CSS实现的Loading效果

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

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

相关 CSS content换行技术实现字符animation loading效果

by [zhangxinxu][] from [http://www.zhangxinxu.com/wordpress/?p=5753][http_www.zhangxinx

深藏阁楼爱情的钟/ 2022年06月16日 02:59/ 0 赞/ 471 阅读

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

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

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

相关 CSS3实现1前端常用Loading效果

此页动画效果都是gif图的，不想用代码写的话，下载图片就可使用。第1种效果： ![1086124-20170308160012500-1342891376.gif][]

小咪咪/ 2021年10月24日 04:36/ 0 赞/ 345 阅读

相关 CSS实现橡皮筋效果

![在这里插入图片描述][2020051309320223.gif] HTML代码： <body> <div class="container">

电玩女神/ 2021年07月26日 11:54/ 0 赞/ 675 阅读