1

我有两个背景：

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

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

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

4

3 回答 3

10

这可以使用纯 CSS 3 来完成，例如关键帧动画：

演示：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-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

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

于 2012-04-11T14:44:58.550 回答
0

这是一个选项：

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

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

div然后使用以下 css创建一个which：

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

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

于 2012-04-11T14:14:54.923 回答
0

仅将海洋作为背景并创建一个以 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>
于 2012-04-11T15:40:17.283 回答