Question

我创建了一个半工作的动画滚动<div>。动画的作用除了我希望它“环绕”的事实。我的意思是，当第一个元素离开屏幕的底部时，它从顶部向下，或者在顶部的“队列”顶部堆叠。

我怎样才能做到这一点？使用2个相同的div是唯一的方法吗？

我的CSS代码如下：

.posts 
{
-webkit-animation: movetweets 10s linear infinite;
-moz-animation: movetweets 10s linear infinite;
-o-animation: movetweets 10s linear infinite;
}   

@-webkit-keyframes movetweets {
    from {margin-top: -100%;}
    to {margin-top: 100%;}
}
@-moz-keyframes movetweets {
    from {margin-top: -100%;}
    to {margin-top: 100%;}
}
@-o-keyframes movetweets {
    from {margin-top: -100%;}
    to {margin-top: 100%;}
}

这是一个JSFiddle，其中包含一些与我的HTML格式相同的通用html。

Answer 1

如果你正在寻找一个没有jquery / js的解决方案，我已经制作了适用于Chrome，Firefox，IE和Safari的小提琴。我使用marquee标签代替CSS3动画，因为我觉得它是一个更优雅的解决方案。

http://jsfiddle.net/simsketch/aj5t2m1k/

<div style="width: 125px; height: text-align:left; box-shadow: 0px 0px 10px 0px #C0C0C0; background: >#FFFFFF; padding: 0px;"> <marquee onmouseover='this.stop();' onmouseout='this.start();' direction="up" height="125" scrollamount="2"> <div> <a href="#" rel="nofollow" target="_blank"> <img src="http://placehold.it/125x125" width="125" height="125" alt="scrolling vertical image marquee" /> </a></div> <div><br/> <a href="#" rel="nofollow" target="_blank"> <img src="http://placehold.it/125x125" width="125" height="125" /></a></div> <div><br/> <a href="#" > <img src="http://placehold.it/125x125" width="125" height="125" /></a></div> <div><br/> <a href="#" rel="nofollow" target="_blank"> <img src="http://placehold.it/125x125" width="125" height="125" /></a></div> </marquee> </div>

如果使用jquery或js是可以接受的，下面是一个很棒的垂直滑块，带有一堆选项。

http://www.jssor.com/demos/vertical-slider.html

使用CSS3动画无限地滚动Div

1 个答案: