HTML 5/CSS动画 - 滚动平铺背景图像

Question

我在html中看到了一些补间动画的示例，但似乎无法找到符合我确切需要的明确答案。

我正在尝试制作占据100％网页高度的某个宽度的div。这个div应该有一个平铺的背景图像。

这是棘手的部分 - 我希望平铺图像在div内以可设定的速度垂直滚动。

有没有简单的解决方案呢？

Answer 1

您可以通过动画background-position属性来完成此操作。

body{ 
 
    background: url("https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") repeat; 
 
    -webkit-animation: scrolling 5s linear infinite; 
 
    -moz-animation: scrolling 5s linear infinite; 
 
    -o-animation: scrolling 5s linear infinite; 
 
    animation: scrolling 5s linear infinite; 
 
} 
 

 
@-webkit-keyframes scrolling { 
 
    from{ 
 
     background-position: 0 0; 
 
    } 
 
    to{ 
 
     background-position: 0 105%; 
 
    } 
 
}