使用CSS无限移动多个背景

Question

我有两个背景:

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

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

编辑:当他到达最右边(并且图像不再可见)时,他将再次从左边缘出现并开始从左到右进行漂移.

Answer 1

这可以使用纯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-必须添加供应商前缀(例如)(另请参阅我可以使用CSS3动画作为兼容性说明).在我的演示中,我使用了所有属性,除了最后一个属性.