加载中，三点循环机制 

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <title>加载动画</title></head>
  <style>
   .dotting {
    margin: 20% auto;
    width: 150px;
   }
   .dotting {
      margin-top: 10px;
      display: flex;
      align-items: center;
    }
  .dotting > div {
      display: inline-block;
      width: 12px;
      height: 12px;
      background-color: #bec7d1;
      border-radius: 50%;
      display: inline-block;
      animation: dotting 1.5s infinite ease-in-out;
      animation-fill-mode: both;
      margin-left: 3px;
    }
    .dotting .point1 {
      animation-delay: -0.3s;
      margin-left: 5px;
    }
    .dotting .point2 {
      animation-delay: -0.1s;
    }
    @keyframes dotting {
      0% {
        opacity: 1;
      }
      33% {
        opacity: 0.25;
      }
      66% {
        opacity: 0.25;
      }
      100% {
        opacity: 1;
      }
    }
</style>
<body>
<div class="dotting">
  <div class="point1"></div>
  <div class="point2"></div>
  <div class="point3"></div>
</div>
</body>
</html>
posted @ 2023-04-11 11:21  DL·Coder  阅读(60)  评论(0)  编辑  收藏  举报