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