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

Question

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

看起来像这样:

但是正如您看到的那样，当图像行的末尾到达时，有一个巨大的空白区域，而图像最终再次出现。

您可以在这里进行现场测试: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%);
    }
}

我希望永远不会看到那个空白，我希望它永远滚动下去。有人知道如何实现这种行为吗？

谢谢，祝你有愉快的一天。

Answer 1

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

至少有足够多的前几个来填满屏幕的整个宽度，或者分成两个不同的标签，你的元素。

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

您的案例需要 javascript。

如此多的图像逐行换行需要克隆整个 ul。

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

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

jQuery DEMO 你的 fiddle 。

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

---

但是对于小的“marquee like”，你可以使用伪元素来克隆前几张图片。

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

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

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