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