这个代码怎么改能实现图片无限循回轮播呢？

Question

css动画初学者

谢谢！

Answer 1

这是我四张图轮播的css实现demo

<style scoped>
.banner{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.banner img{
  width: 100%;
  height: 100vh;
}
.banner .banner-move{
  width: 500%;
  height: 100vh;
  display: flex;
  animation-name: banner-move;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
.banner .banner-move div{
  width: 100%;
  position: relative;
}
.banner .banner-move div h1{
  position: absolute;
  bottom: 50px;
  left: 40px;
  color: #fff;
  font-size: 40px;
}
@keyframes banner-move {
  0%{
    margin-left: 0;
  }
  20%{
    margin-left: 0;
  }
  25%{
    margin-left: -100%;
  }
  45%{
    margin-left: -100%;
  }
  50%{
    margin-left: -200%;
  }
  70%{
    margin-left: -200%;
  }
  75%{
    margin-left: -300%;
  }
  95%{
    margin-left: -300%;
  }
  100%{
    margin-left: -400%;
  }
}
</style>