实现多个图片无限交替加载的loading效果

前言：由于业务需要，UI提供了一张gif动画的几张底图，因为加载gif花销很大，所以要前端用几张底图实现gif的效果。

那么animation就不能实现这种效果了吗？答案当然是No

下面先把UI想要的效果贴出来，毕竟无图言?～

你可能不知道的css animation - 掘金

(漏图了，不知道咋修改gif，不要在意，请轻喷～)

下面开始直接上代码

// 组成gif的几张底图组成一张雪碧图

// html代码


      <div class="inner-circle">
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
        <div class="flower"></div>
      </div>
    </div>
  </div>

// css代码

    .container {
      border-radius: 27px;
      width: 180px;
      height: 180px;
      margin: 100px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000;
      opacity: .5;
    }

    .outer-circle {
      width: 123px;
      height: 123px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .inner-circle {
      position: relative;
      width: 115px;
      height: 115px;
      border-radius: 50%;
      background: #000;
    }

    .flower {
      position: absolute;
      width: 81px;
      height: 63px;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      z-index: 1;
      background: url('./assets/images/flower.png') no-repeat;
    }

    .flower:nth-child(1) {
      background-position: 0 0;
    }

    .flower:nth-child(2) {
      background-position: -108px 0;
      opacity: 0;
      animation: circle2 3s infinite backwards;
    }


    .flower:nth-child(3) {
      background-position: -216px 0;
      opacity: 0;
      animation: circle3 3s infinite backwards;
    }

    .flower:nth-child(4) {
      background-position: -324px 0;
      opacity: 0;
      animation: circle4 3s infinite backwards;
    }

    .flower:nth-child(5) {
      background-position: -432px 0;
      opacity: 0;
      animation: circle5 3s infinite backwards;
    }

    .flower:nth-child(6) {
      background-position: -540px 0;
      opacity: 0;
      animation: circle6 3s infinite backwards;
    }

    .flower:nth-child(7) {
      background-position: -648px 0;
      opacity: 0;
      animation: circle7 3s infinite backwards;
    }

    @keyframes circle2 {

      0%,
      15% {
        opacity: 0;
      }

      16%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle3 {

      0%,
      30% {
        opacity: 0;
      }

      31%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle4 {

      0%,
      45% {
        opacity: 0;
      }

      46%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle5 {

      0%,
      60% {
        opacity: 0;
      }

      61%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle6 {

      0%,
      75% {
        opacity: 0;
      }

      76%,
      100% {
        opacity: 1;
      }
    }

    @keyframes circle7 {

      0%,
      90% {
        opacity: 0;
      }

      91%,
      100% {
        opacity: 1;
      }
    }
  </style>

主要思想就是以下几步

// 动画执行时间假如是1s，延迟4s执行，总共是5s的时间。我们可以在20%的时候把要做的事情在这里做掉即可，比如：

@keyframes move {
    0% {
        opacity: 0;
    }
    
    20%,
    100% {
        opacity: 1;
    }
}

// 然后把每个底图的动画调整下具体的百分比即可

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。