loading

[复制链接]
admin 发表于 2021-12-11 11:05:35 | 显示全部楼层 |阅读模式
  1. <div class="loading-pointer-inner"><div class="pointer"></div> <div class="pointer"></div> <div class="pointer"></div></div>
  2.         <style>
  3.                 .loading-pointer-inner{position: relative;width: 200px;height: 50px;}
  4.                 .loading-pointer-inner .pointer{
  5.                         position: absolute;
  6.                         top: 0;
  7.                         width: 6px;
  8.                         height: 6px;
  9.                         margin-left: 24px;
  10.                         background-color: #cccad3;
  11.                         border-radius: 50%;
  12.                 }
  13.                 .loading-pointer-inner .pointer:first-child {
  14.                         left: 0;
  15.                         animation: loading1 .45s linear 0s infinite alternate;
  16.                 }
  17.                 .loading-pointer-inner .pointer:nth-child(2) {
  18.                         left: 44px;
  19.                         animation: loading2 .45s linear .15s infinite alternate;
  20.                 }
  21.                 .loading-pointer-inner .pointer:nth-child(3) {
  22.                         left: 88px;
  23.                         animation: loading3 .45s linear .3s infinite alternate;
  24.                 }
  25.                 @keyframes loading1{
  26.                         50%{left:-2px;top:-2px;width:10px;height:10px}
  27.                         to{left:-5px;top:-5px;width:16px;height:16px}
  28.                 }
  29.                 @keyframes loading2{
  30.                         50%{left:42px;top:-2px;width:10px;height:10px}
  31.                         to{left:39px;top:-5px;width:16px;height:16px}
  32.                 }
  33.                 @keyframes loading3{
  34.                         50%{left:86px;top:-2px;width:10px;height:10px}
  35.                         to{left:83px;top:-5px;width:16px;height:16px}
  36.                 }
  37.         </style>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则