创建无限水平滚动（如Ring）

Question

我正在尝试制作一个具有水平子级并从左向右移动的容器
这些子元素中的每一个，当它到达容器的末尾时 => 到达容器的开头
让我们想象它包含 4 个孩子：

  0% :  ..1 | 2 | 3 | 4..    
 25% :  ..4 | 1 | 2 | 3..  
 50% :  ..3 | 4 | 1 | 2..  
 75% :  ..2 | 3 | 4 | 1..  
100% :  ..1 | 2 | 3 | 4..

不像旋转木马，而是像圆环滚动（光滑）
无限时间

下

.container {
  height: 200px;
  width: 800px;
  border: 1px solid #333;
  overflow: hidden;
  margin: 25px auto;
}

.box {
  background: orange;
  height: 180px;
  margin: 10px;
  animation-name: move;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: right;
  animation-timing-function: linear;
  display: flex;
}

.card {
  background: #fff;
  height: 150px;
  min-width: 100px;
  margin: 15px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box:hover {
  animation-play-state: paused;
}

@keyframes move {
  0% {
    margin-left: 000px;
  }
  25% {
    margin-left: 100px;
  }
  50% {
    margin-left: 200px;
  }
  75% {
    margin-left: 300px;
  }
  100% {
    margin-left: 400px;
  }
}

<div class="container">
  <div class="box">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

是我尝试过的代码：

可以使用 JavaScript 、Bootstrap、tailwind CSS。

Answer 1

检查一下并告诉我这是否有效:)

.container {
  height: 200px;
  width: 500px;
  border: 1px solid #333;
  overflow: hidden;
  margin: 25px auto;
    background: orange;

}

.box {  
  display: flex;
  height: 180px;
  position: relative;
  animation-name: move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: right;
  animation-timing-function: cubic-bezier(1,2,3,1); //linear

}

.card {
  background: #fff;
  height: 150px;
  min-width: 100px;
  margin: 15px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box:hover {
  animation-play-state: paused;
}

@keyframes move {
  0% {
    left: -515px;
  }
  100% {
    left: 0px;
  }
}

<div class="container">
  <div class="box">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
     <div class="card"></div>
      <div class="card"></div>
  </div>
</div>