纯html+css实现的跳动小球加载效果

小球加载动画

在我们日常设计网页中，加载动画是必不可缺的一个设计；因为在一些资源加载的时候需要让用户等待一段时间，为了使用户有更好的用户体验，一个使人身心愉悦的加载动画变必不可少。

今天为大家带来的就是一个加载效果

首先效果图是这样的

首先我们先往html部分放两个div盒子 并给父节点设置一个loader类名， 接下来我们要给这个loader加上一些css样式

 <div class="loader">
      <div></div>
      <div></div>
      <div></div>
 <div>

css样式部分+动画部分

给子集div设置宽16px和高16px，然后用 border-radius: 50%; 这样一个小圆圈就做好了， 然后我们希望这个小圆圈居中显示，所以我们给父节点为flex布局 并使用 justify-content: center;让子项居中显示

  .loader {
      display: flex;
      justify-content: center;
    }
     .loader div:nth-child(2) {
      animation-delay: 0.2s;
    }
    .loader div:nth-child(3) {
      animation-delay: 0.4s;
    }
 .loader div {
      width: 16px;
      height: 16px;
      margin: 3rem 0.2rem;
      background-color: #8385aa;
      border-radius: 50%;
      animation: loader 0.6s infinite alternate;
    }

接着我们加一个动画让三个小球跳动起来 动画将透明度修改为0.1再使用translate3d让小球沿外轴偏移16像素，最后将动画应用上小球上这个时候三个小球是一起跳动的并不是我们想要的效果所以我们还需要设置一个第二个，第三个小球让他们的动画延迟开始，这样就可以了！

  @keyframes loader {
      to {
        opacity: 0.1;
        transform: translate3d(0, -16px, 0);
      }
    }

怎么样是不是很简单！关注我 我们下期再见！