【问题标题】:HTML 5 / CSS animation - Scrolling tiled background image [closed]HTML 5 / CSS 动画 - 滚动平铺背景图像 [关闭]
【发布时间】:2016-01-11 03:03:45
【问题描述】:

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

我正在尝试制作一个占据 100% 网页高度的特定宽度的 div。这个 div 上应该有一个平铺的背景图片。

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

有没有简单的解决办法?

【问题讨论】:

  • 寻求代码帮助的问题必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
  • 不是最好的问题,而是here is an example anyway
  • 你会如何改进这个问题。链接的网页似乎更适用于需要解决方案而不是识别算法或设计方法的问题
  • @Exitcode0 实际上,识别算法或设计方法并不是 StackOverflow 的用途。它纯粹是一个解决问题的网站。
  • 好的,抱歉发帖

标签: javascript css html animation


【解决方案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%;
  }
}

【讨论】:

  • No need for those prefixes可能唯一需要的前缀是-webkit-
  • 这似乎只适用于 Chrome 而不是 IE 或 Firefox。还有,重启的时候会有轻微的跳跃
  • @Exitcode0 看看这三个问题:123。你现在应该可以通过搜索一下解决剩下的问题了。
  • 好的,谢谢。我找到了一个更好的例子jsfiddle.net/chriscoyier/Hyg3C/20
  • @Exitcode0 例子看懂了,还是一味的抄代码?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-14
  • 1970-01-01
  • 2023-03-14
相关资源
最近更新 更多