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

该代码（可耻地）取自我上面提到的网站。我不能，在我的生活中，弄清楚如何在文本上方创建滚动图像。

非常感谢非常。

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

希望它有所帮助。

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

1 个答案: