如何用CSS制作水平滑动无限动画？

我正在尝试制作一个包含 3 行图像的无限水平滑块。

It looks like this:

但正如您所看到的，当图像行的末尾到达时，图像最终再次出现时会出现巨大的空白。

您可以在这里进行实时测试：http://jsfiddle.net/tbergeron/q596y/6/ http://jsfiddle.net/tbergeron/q596y/6/

这是其背后的 CSS：

ul.lists {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    -webkit-animation: moveSlideshow 180s linear infinite;
    -moz-animation:    moveSlideshow 180s linear infinite;
}

ul.lists li {
    list-style: none;
    display: inline-block;
}

ul.lists li img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

ul.slider2 {
    top: 140px;
}

ul.slider3 {
    top: 280px;
}

@-webkit-keyframes moveSlideshow {
    0%   {
        -webkit-transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-300%);
    }
}
@-moz-keyframes moveSlideshow {
    0%   {
        -moz-transform:    translateX(0);
    }
    100% {
        -moz-transform:    translateX(-300%);
    }
}

我希望发生的事情是永远看不到那个空白，我希望它永远滚动。任何人都知道如何实现这种行为？

感谢，并有一个愉快的一天。

基本上，您需要克隆您的元素。

至少有足够多的第一个标签来填充屏幕的整个宽度，或者分成两个不同的标签，即您的元素。

因此，一旦它们的一部分向左移动，您就可以将它们移回右端以填充该空白空间，以继续滚动而没有任何间隙。

您的案例需要 JavaScript。

如此多的图像逐行环绕需要克隆整个图像ul.

一个好的折衷方案是将内容分成两部分ul，这样就可以转到下一次屏幕。

复制整体ul在 HTML 文档中可能不是一个好主意，我不建议对文本这样做。

jQuery DEMO http://jsfiddle.net/q596y/8/你的小提琴。

$(".lists.slider1").clone().appendTo("body");
$(".lists.slider2").clone().appendTo("body");
$(".lists.slider3").clone().appendTo("body");

但对于小的“选框式”，您可以使用伪元素来克隆前几张图像。

对于已知长度（em）或已知容器宽度的文本，您可以使用文本阴影。

伪和文本阴影避免内容重复。

一些可怕的 CSS 例子展示了克隆的想法：http://dabblet.com/gist/5656795 http://dabblet.com/gist/5656795