使用 CSS3 动画无限滚动 Div答案

【问题标题】：Infinitely Scrolling Div With Wraparound Using CSS3 Animations使用 CSS3 动画无限滚动 Div
【发布时间】：2014-12-10 16:57:10
【问题描述】：

我创建了一个动画滚动<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。

【问题讨论】：

你能分享你的 HTML 吗？基本上你需要使用 Javascript 来做到这一点。获取窗口的高度并跟踪正在滚动的元素的位置。一旦它低于可见区域，将位置设置回窗口的顶部。
可以看到一个JSFiddle here.
我正在尝试做同样的事情，我想知道您是否找到了 CSS 解决方案？

标签： jquery html css animation

【解决方案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="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 是可以接受的，下面是一个很棒的垂直滑块，有很多选项。

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

【讨论】：

您的选框示例与我描述的解决方案存在相同的问题。就 js/jquery 库而言，它不能满足我的需要。不过谢谢！