如何使用CSS制作水平滑动的无限动画? [英] How to make a horitonzal sliding infinite animation using CSS?

问题描述

我正在尝试制作具有3行图像的无限水平滑块.

I'm trying to make an infinite horizontal slider with 3 rows of images.

它看起来像这样:

但是，正如您所看到的，当图像行的末端到达时，有一个巨大的空白空间，而图像最终再次出现.

But as you see when the end of the rows of images arrive, there's a huge blank space while the image finally appears again.

您可以在此处进行实时测试: http://jsfiddle.net/tbergeron/q596y/6/

You can test it live here: 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%);
    }
}

我想发生的事情是永远不要看到那个空白，我希望它永远存在.有人对如何实现这种行为有想法吗?

What I'd like to happen is to never see that blank space, I would like it to roll on forever. Anyone has an idea on how to achieve this behavior?

谢谢，祝你有美好的一天.

Thanks and have a nice day.

推荐答案

基本上，您需要克隆元素.

basicly , You need to clone your elements.

至少第一个元素足够填满整个屏幕宽度，或分成两个不同的标签，即您的元素.

At least many enough of the first ones to fill the entire width of the screen, or split into two differents tags, your elements.

因此，一旦将它们的一部分移到左侧，就可以将它们移回右端以填充该空白空间，以保持滚动而没有任何间隙.

So once a part of them, is gone left, you move them back to the right end to fill that empty space to keep scrolling without any gaps.

您的情况需要使用javascript.

Your case requires javascript.

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

So many images wrapping line by line needs to clone the whole ul.

一个不错的折衷办法是将内容分割成两个ul，这样一个人就可以在屏幕上下一个.

A good compromise could be to split content within two ul, so one can to next once of screen.

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

To duplicate the whole ul in the HTML document might not be a good idea and i would not advise to do so for text.

您的小提琴的

jQuery 演示 .

jQuery DEMO of your fiddle.

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

---

但是对于小的字幕"，您可以使用伪元素来克隆前几个图像.

---

But for small "marquee like" , you can use pseudo elements to clone the first few images.

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

For text of a known length(em) or known container's width , you may use text-shadow.

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

Pseudo and text-shadow avoid duplication of content.

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

Some horrible CSS example that demonstrate the cloning idea: http://dabblet.com/gist/5656795

这篇关于如何使用CSS制作水平滑动的无限动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！