带有 CSS3 动画的 Twitter Bootstrap 正文背景答案

【问题标题】：Twitter Bootstrap body background with CSS3 Animation带有 CSS3 动画的 Twitter Bootstrap 正文背景
【发布时间】：2013-07-23 22:05:30
【问题描述】：

所以这些天我放弃了 CSS3 动画，所以我现在正在玩它。但不幸的是，我在将 bg 图像定位到底部时遇到了问题。

这是我正在处理的代码：

  body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background: #A9D0F5 url("../image/bg-clouds.png") repeat-x fixed center bottom;
  animation: animatedBackground 40s linear infinite;
  -ms-animation: animatedBackground 40s linear infinite;
  -moz-animation: animatedBackground 40s linear infinite;
  -webkit-animation: animatedBackground 40s linear infinite;
  /*background-color: #008bcf;*/    
}

@-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-webkit-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-ms-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-moz-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }

这里似乎有什么问题？有任何想法吗？谢谢。

这是 jsfiddle：http://jsfiddle.net/Rex2E/

【问题讨论】：

为什么不一起扔一个 jsfiddle 来帮助我们更快地帮助你？
加了一个，请查收。
相关问题：stackoverflow.com/questions/5383438/…

标签： css animation twitter-bootstrap

【解决方案1】：

感谢您添加小提琴。我摆弄了一下，让背景自己定位在底部。

当您将 0 设置为您所说的 Top 或 Left 的位置值时...... 0 0 是左上角。

Check this fiddle

body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 20px;
   color: #333333;
   background: #A9D0F5 url("http://i43.tinypic.com/fcmjv4.png") repeat-x fixed center bottom;
   animation: animatedBackground 40s linear infinite;
   -ms-animation: animatedBackground 40s linear infinite;
   -moz-animation: animatedBackground 40s linear infinite;
   -webkit-animation: animatedBackground 40s linear infinite;
}
@-keyframes animatedBackground {
  from { background-position: center bottom; }
  to { background-position: 100% bottom; }
}
@-webkit-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% bottom; }
}
@-ms-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% bottom; }
}

它在 PC 上的 Chrome 中对我有用，如果它对你有用，请告诉我。干杯。

【讨论】：

【解决方案2】：

您应该在div 中设置背景动画并检查：

Sticky footer and body background image at the bottom of the page

有些答案可能对你有帮助

【讨论】：