如何仅使用 CSS 创建徽标滑块的字幕无限循环

Question

现在，我的代码使徽标从右到左动画，一旦到达末尾，它就会重新启动。如何让它继续循环，以便在新循环开始时第一个徽标跟随最后一个徽标？

编辑：我宁愿不使用额外的js库，所以如果有一种简单的方法用jquery来做到这一点那就更好了

img {
  width: 100px;
}
.marquee {
  position: relative;
  width: 100%;
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
}
.marquee div {
  display: block;
  position: absolute;
  width: 300%;
  overflow: hidden;
  animation: marquee 20s linear infinite;
}
.marquee div:hover {
  animation-play-state: paused;
}
.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

<div class="marquee">
  <div>
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
  </div>
</div>

Answer 1

我更新了你的小提琴https://jsfiddle.net/gkpnx34v/2/ --- 做了一些修改，但这应该给你这个想法。

.tech-slideshow {
  height: 100px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border:1px solid black;
  font-size:0; /* THIS IS A HACK TO REMOVE THE "WHITESPACE" BETWEEN IMAGES.
                  YOU COULD ALSO PUT ALL OF THE IMAGES ON THE SAME LINE
                  (eg: <img src=""><img src=""><img src=""> 
                  with no spaces or line-breaks),
                  BUT THAT MAKES THE CODE LESS READABLE SO I'M DOING THIS
                  FOR THE SAKE OF CREATING THIS EXAMPLE FOR YOU */
}

.mover-1 {
  height: 150px;
  width: max-content;
  
  position: absolute;
  overflow-x:hidden;
  top: 0;
  left: 0;

  animation: moveSlideshow 5s linear infinite;
}

.mover-1 img {
  display:inline-block;
  vertical-align:middle;
  width:100px;
  margin:0;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-500px);  
  }
}

<div class="tech-slideshow">
  <div class="mover-1">
    <img src="https://placekitten.com/100/150">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">

    <img src="https://placekitten.com/100/150">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">

    <img src="https://placekitten.com/100/150">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
  </div>
</div>

将.mover-1容器的宽度设置为max-content（自动调整为所需的宽度）。您还可以将其设置为任意（巨大）宽度，这样您就不必担心徽标滚动到下一行。

然后在图像上设置一些样式，以便它们能够很好地对齐。

最后，将 moveSlideshow translateX 距离设置为一组徽标的精确宽度。

关键是，您想要有 2 组徽标 - 初始组和您滚动到视图中的副本。将动画设置为精确移动 1 组的宽度，并且它应该平滑循环。

只是为了后代（而且因为复制和粘贴代码真的很容易，并且不需要任何额外的带宽来渲染），我实际上添加了第三组徽标，只是为了确保我的徽标块足够宽，不会有间隙宽屏幕。

PS 我在小猫图像上设置的高度差异（其中一些是 150 像素高而不是 100 像素）与功能无关；我只是想确保您可以知道动画何时循环。

.mover-1PPS 您可以轻松地使用 jQuery 来查找该容器的宽度 ( $('.mover-1')[0].width()) 并设置关键帧来移动该距离，而不是 a) 手动计算徽标的总宽度或 b) 添加冗余的徽标块。然后创建一个图像数组 ( $('.mover-1 img'))，然后将它们附加/添加到原始集合中。

这段代码（未经测试）应该会让你接近：

var logos = $('mover-1 img');
$('.mover-1').append(logos).append(logos);