2

我正在尝试添加一个无限垂直滚动的图像，就像 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;
}

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

非常感谢提前。

4

1 回答 1

9

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

@-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

希望能帮助到你。

于 2012-12-31T00:50:03.233 回答