图片背景图片切换

利用动画 animation 实现图片的切换效果相当的好，background里面是需要切换的图片，必须要有，不然会出现bug,切换会出现问题

<style>
   .photo {
  width: 1170px;
  margin: 0 auto;
  height: 329px;
  animation: move 18s 3s infinite;
  background: url("../images/ban1.jpg"), url("../images/139632507725908.jpg"), url("../images/139694454115971.jpg");
}

@keyframes move {
  0% {
    background: url("../images/ban1.jpg") no-repeat center center/100% 100%;
  }
  16% {
    background: url("../images/ban1.jpg") no-repeat center center/100% 100%;
  }
  33% {
    background: url("../images/139632507725908.jpg") no-repeat center center/100% 100%;
  }
  49% {
    background: url("../images/139632507725908.jpg") no-repeat center center/100% 100%;
  }
  66% {
    background: url("../images/139694454115971.jpg") no-repeat center center/100% 100%;
  }
  83% {
    background: url("../images/139694454115971.jpg") no-repeat center center/100% 100%;
  }
  100% {
    background: url("../images/ban1.jpg") no-repeat center center/100% 100%;
  }
}
</style>
<div class="photo">
                <!-- <img src="./images/ban2.jpg" alt=""> -->
            </div>