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

程序员通通

已于 2023-09-17 21:29:37 修改

阅读量357

点赞数

分类专栏： CSS 文章标签： css loading

于 2019-03-09 15:58:18 首次发布

本文链接：https://blog.csdn.net/ac_greener/article/details/88367281

版权

CSS 专栏收录该内容

9 篇文章 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>

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