Html 使用CSS的无限图标滑块

我有10个图标，我从右向左水平滚动。 我试图给无限图标设置动画，但在图标的末尾，它得到了空间，并从一个图标上跳下

我必须删除图标末尾的空格，幻灯片将继续从一个开始而不跳跃。我的意思是我需要一个无限循环

你能帮我解决这个问题吗

.logo{宽度：100%；}
.logo_滑块{
溢出：隐藏；
宽度：752px；
保证金：自动；
}
.logo_滑块{
溢出：隐藏；
}
.logo_滑块ul{
保证金：0；
填充：0；
列表样式：无；
显示器：flex；
位置：相对位置；
动画：mymove 10s线性无限；
}
.logo_.ul li{
弹性收缩：0；
flex-grow:0；
显示：块；
边框：1px实心#ccc；
利润率：20px；
宽度：80px；
高度：80px；
边界半径：50%；
}
.logo_滑块ul li a img{
宽度：100%；
}
/*Safari 4.0-8.0*/
@-webkit关键帧mymove{
0%{左：0；}
100%{左：-100%；}
}
/*标准语法*/
@关键帧mymove{
0%{左：0；}
100%{左：-100%；}
}

---

其想法是将滑块移动

120px

，即仅滑动一个图标所需的像素量（每个列表项实际上是

80px

宽加上

40px

）。由于图标都是相同的图标，最终结果将是无缝的

出于性能考虑，移动是使用

变换

属性完成的，而不是

左

只需确保添加足够的图像以覆盖所有不同的视口（加上一个）

CSS

.logo_slider {
  overflow: hidden;
  width: 752px;
  margin: auto;
}

.logo_slider {
  overflow: hidden;
}

.logo_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  animation: mymove 1s linear infinite;
}

.logo_slider ul li {
  flex-shrink: 0;
  display: block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-sizing: border-box;
}

.logo_slider img {
  width: 100%;
}

@keyframes mymove {
  0%    { transform: 0; }
  100%  { transform: translateX(-120px); }
}

---

无论如何，我强烈建议滑动一个元素，将该图标作为重复背景（图标本身包含灰色边框），而不是使用多个图像

下面是一个使用背景的示例

使用这种方法，通过将内部元素（伪元素

：包含背景的
之前）的宽度设置为父容器的宽度加上
120px
（这是使用
calc（）
函数完成的）来实现移动的假象

标记将非常简单

<div class="optimizedslider"></div>

最后，这里是我使用的图标（
240x200
），以备您需要

因此，每当图标从屏幕上移开时，我们只是将其完全移除，没有人能看到它。同时，我们在屏幕的另一侧创建另一个，这样它就会移动到画布上。使用此选项更改动画“mymove”

@keyframes mymove {
  0%    { translate: 0; }
  100%  { transform: translateX(-120px) } 
}

在您的示例中，120px大约是一个图标的宽度。您也只需要比您想要显示的多一个图标。如果您想显示6，请留下7，以便在最后一个可以创建幻觉
 在同一时刻可以看到多少图标？图标与您的示例中的图标相同，或者可能不同？我需要与我在代码段中添加的滑块相同的滑块。我必须继续滑动图像。我必须同时看到六个图标。太酷了！谢谢，@fcalderan，我需要这样。我在过去两天内尝试了这个问题，你在5分钟内解决了。真的很感谢。从我这边向上投票。如果我必须显示所有的10个图标，那么？移除宽度？使用您的方法，您需要插入11幅图像。重复的背景只有一张，但我只有10张图片。那么11幅图像背后的逻辑是什么呢？给人一种运动的错觉。第一个图标必须消失
@keyframes mymove {
  0%    { translate: 0; }
  100%  { transform: translateX(-120px) } 
}