jquery - 使用 CSS3 动画无限滚动带环绕的 Div

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 的 fiddle 。我使用 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="https://via.placeholder.com/125x125" width="125" height="125" alt="scrolling vertical image marquee" /> </a>
    </div>
    <div><br/>
      <a href="#" rel="nofollow" target="_blank">
        <img src="https://via.placeholder.com/125x125" width="125" height="125" /></a>
    </div>
    <div><br/>
      <a href="#">
        <img src="https://via.placeholder.com/125x125" width="125" height="125" /></a>
    </div>
    <div><br/>
      <a href="#" rel="nofollow" target="_blank">
        <img src="https://via.placeholder.com/125x125" width="125" height="125" /></a>
    </div>
  </marquee>
</div>

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

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