css - 如何在 CSS 中获得无限垂直滚动的图像？

Question

我正在尝试添加一个无限垂直滚动的图像，就像 Adam Whitcroft 的精彩 landing page .我看过他的源代码，但我无法弄清楚他是如何实现的。这个想法是“我是科学家”文本将出现在图像上。

我当前的代码是:

<div class="ani">
    <div class="container">
            <img src="img/Gene.png" alt="Scrolling Genes" />
        </div> 
<h3> I'm a scientist. </h3>
    <p> I worked at.... </p>        

“ani”类的 CSS 是:

.ani {
background: url(img/Gene.png);
color:#ecf2f9;
text-align:center;
-webkit-animation:bgscroll 20s infinite linear;
}

对于“容器”:

    .header .container {
    max-width:400px;
}

该代码(可耻地)取 self 上面提到的网站。我不能，我这辈子都想不出如何在文本上方创建滚动图像。

在此先感谢非常。

Answer 1

你的代码很好。您只是忘记定义动画。

@-webkit-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:0 -520px;}
}

这是您想要的示例:http://codepen.io/joe/pen/hdoIk

很明显，你必须用你自己的图片来改变图片，并为动画定义合适的高度。

要获得完整的浏览器支持，请不要忘记添加所有 CSS 前缀供应商。更多信息在这里:http://www.w3schools.com/css3/css3_animations.asp(-wekbit-moz-o)

只需将代码粘贴到:http://prefixr.com，您就可以轻松做到这一点

希望对您有所帮助。