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

Question

我正在尝试添加一个无限垂直滚动的图像,就像Adam Whitcroft的精彩着陆页一样.我看过他的源代码,但我无法弄清楚他是如何把它拉下来的.我们的想法是,"我是一名科学家"的文字将出现在图像上.

我目前的代码是:

<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;
}

该代码(可耻地)取自我上面提到的网站.在我的生活中,我无法弄清楚如何在文本上方创建滚动图像.

谢谢非常提前很多.

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

希望能帮助到你.