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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/AC_greener/article/details/88367281
<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>

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

猜你喜欢

转载自blog.csdn.net/AC_greener/article/details/88367281