使用 CSS 无限移动多个背景答案

【问题标题】：Move multiple backgrounds infinitely using CSS使用 CSS 无限移动多个背景
【发布时间】：2012-04-23 20:26:00
【问题描述】：

我有两种背景：

body {
    background-image: url(img/nemo.png),url(img/ocean.png);
}

如何让nemo.png background从左右无限移动但不影响ocean.png background？

编辑：当他到达最右边（并且图像不再可见）时，他会再次从左边出现并开始从左到右漂移。

【问题讨论】：

你的意思是尼莫来回游动？
你能定义你所说的无限吗？到了右边，是不是又从左边出现了，是不是转身又回到左边？
我的意思是当它到达最右边时，它又出现在左边。他不回头，也不回头。
那么您是否在将 nemo 从左向右移动然后再返回时遇到问题 - 或者您在移动 only nemo 时遇到问题（因为您在相同的元素）。如果是后者，我认为将海洋放在 html 元素上并且只在 body 元素上放置 nemo 会更容易。然后，您可以使用 jQuery 轻松地为 body 元素的背景位置设置动画。

标签： css animation background css-animations

【解决方案1】：

这是一个选项：

从nemo.png 创建一个动画 GIF，这是一个图像从左向右移动的简单动画。

然后通过将ocean.png 设置为页面body 的背景来创建分层背景。

然后创建一个div，其css如下：

width:100%; 
height:100%;
background-position:center center;
background-image: url(img/moving-nemo.gif);

div 将成为您所有内容的包罗万象的容器，为您提供分层背景效果。

【讨论】：

这不会产生许多从左到右移动的 nemo 图像吗？
这取决于你如何制作动画 gif。 gif 应该是一张尼莫来回游动的图像。

【解决方案2】：

这可以通过纯 CSS 3 来完成，例如 keyframed animations:

演示：http://jsfiddle.net/dghsV/112

body {
    background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%, 0;
    -moz-animation: swim 2s linear 0s infinite;
    -webkit-animation: swim 2s linear 0s infinite;
    animation: swim 2s linear 0s infinite;
}
@-moz-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}

语法

animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;

该功能是实验性的，因此必须添加供应商前缀（例如-webkit-）（有关兼容性说明，另请参阅Can I use CSS3 Animation）。在我的演示中，我使用了所有属性，除了最后一个。

【讨论】：

【解决方案3】：

只将海洋作为背景，并创建一个以 nemo 作为背景的 div：

<div id="nemo"></div>

#nemo {
    background: url(nemo.png) no-repeat;
    width: 100px;
    height: 100px;
    position:absolute;
    left: 0px;
    top: 500px;
    z-index:-10;
}

你可以用 javascript (jQuery) 为这个 div 设置动画：

<script type="text/javascript">
    $(document).ready(function() {
        SwimRight();
    });

//duration is in ms
function SwimRight() {
     $('#nemo').css({positionLeft: 0});
     $('#nemo').animate(
          { left: $(document).width() },
          { duration: 5000,
          easing: normal,
          queue: true, 
          complete: SwimRight}
     );
</script>

【讨论】：