css实现抖音加载中动画

CSS实现抖音加载中动画真的很酷哦！如果你也很想尝试这种炫酷的效果，那就来看看下面的代码吧！

  .loadBox {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 120px;
    width: 100px;
    transform: translate(-50%,-50%);
  }
  
  .loadBox div {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #f47e60;
    position: absolute;
    animation: bouncing 0.7s cubic-bezier(0.36,0.07,0.19,0.97) infinite;
  }
  
  .loadBox div:nth-child(1) {
    animation-delay: -0.12s;
    left: 14px;
  }
  
  .loadBox div:nth-child(2) {
    animation-delay: -0.24s;
    left: 38px;
  }
  
  .loadBox div:nth-child(3) {
    animation-delay: -0.36s;
    left: 62px;
  }
  
  .loadBox div:nth-child(4) {
    animation-delay: -0.48s;
    left: 86px;
  }
  
  @keyframes bouncing {
    0%,80%,100% {
      transform: scale(0.8);
    }
    40% {
      transform: scale(1.3);
    }
  }

在上面的代码中，.loadBox 是用来定位整个动画区域的块级元素；.loadBox div 则代表了动画中的每一个小圆点，通过 nth-child 来实现四个点的不同位置。然后，在 keyframes 中定义了动画的具体变化过程。

最后，只要将代码拷贝到你的项目中，并将对应标签插入到页面中，就可以实现一个和抖音加载动画相似的效果啦！