如何使用关键帧从右向左滑动循环图像

Question

我有这样的 html：

<div class="container-fluid">
            <div class="about-section">
                <div class="slider">
                    <div class="slider-row card">
                        <img class="slider-column card-background" src="https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="Road Map">
                        <img class="slider-column card-background" src="https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="Road Map">
                        <img class="slider-column card-background" src="https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="Road Map">
                        <img class="slider-column card-background" src="https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="Road Map">
                        <img class="slider-column card-background" src="https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="Road Map">
                        <img class="slider-column card-background" src="https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="Road Map">
                    </div>
                </div>
            </div>
        </div>

这是我的 css：

.slider {
  display: flex;
}

.slider .slider-row {
  width: 100%;
  top: calc(50% - 97.25px);
  overflow: hidden;
}
.slider .slider-row .slider-column {
  width: 160ppx;
  height: 194.5px;
  background-size: 2956px 194.5px;
  animation: slide-left 50s linear infinite;
}

@keyframes slide-left {
  0%{transform:translateX(0)}to{transform:translateX(-3200px)}
}

.card {
  list-style: none;
  position: relative;
  filter: brightness(0.9) saturate(0);
}

.card:before {
  content: "";
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card-background {
  background-size: cover;
  background-position: center;
  border-radius: 24px;
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: filter 200ms linear, transform 200ms linear;
}

.card:hover {
  filter: unset;
}

.card:hover .card-background {
  transform: scale(1.05) translateZ(0);
  cursor: pointer;
}

我想要实现的目标是在循环中从右到左无限滑动这些图像。因此，当第一个项目向左移动时，其余的应该从右侧的开头开始。你认为我只能用CSS来做吗？每个答案都将受到赞赏。

Answer 1

如果我理解正确的话，你想要实现的目标是用普通的 css 不可能实现的。您需要始终计算 x 坐标才能知道每张幻灯片的位置。我的建议是使用一些滑块 javascript 库。我最喜欢的是 swiperjs。它允许很多功能来显示幻灯片。但是有很多 js 库可供选择。