Перемещайте несколько фонов бесконечно, используя CSS

У меня есть два фона:

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

Как я могу сделатьnemo.png background двигаться бесконечно слева направо, но не влияетocean.png background?

EDIT: Когда он достигнет самого правого края (а изображение больше не будет видно), он снова появится с левого края и начнет дрейфовать слева направо.

 Rory McCrossan11 апр. 2012 г., 16:12
Можете ли вы определить, что вы подразумеваете под бесконечно? Когда он попадает вправо, он снова появляется слева, разворачивается и возвращается влево?
 mrtsherman11 апр. 2012 г., 16:06
Ты имеешь в виду, что Немо плывет туда-сюда?
 powerbuoy11 апр. 2012 г., 16:33
Так что у вас есть проблемы с перемещением Немо слева направо, а затем обратно - или у вас проблемы с перемещениемonly nemo (поскольку вы используете несколько фоновых изображений для одного элемента). Если бы это было последним, я думаю, что было бы легче поместить океан в элемент html и иметь только nemo на элементе body. Затем вы можете легко анимировать фоновое положение элемента тела с помощью jQuery.
 Jürgen Paul11 апр. 2012 г., 16:26
Я имею в виду, когда он достигает правой части, он снова появляется слева. Он не поворачивается назад и не возвращается назад.

Ответы на вопрос(3)

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

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

чем вы можете оживить этот div с помощью JavaScript (jQuery):

<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>
Решение Вопроса

ключевые кадры анимации:

Demo: 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; }
}
Syntax

animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Функция является экспериментальной, поэтому префиксы поставщиков (например,-webkit-) должны быть добавлены (см. такжеМогу ли я использовать анимацию CSS3 для совместимости заметки). В моей демонстрации я использовал все свойства, кроме последнего.

Создайте анимированный GIF изnemo.png которая представляет собой простую анимацию изображения, движущегося слева направо.

Затем создайте слоистые фоны, установивocean.png на фонеbody вашей страницы.

Затем создайтеdiv который со следующим CSS:

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

div будет всеобъемлющим контейнером для всего вашего контента, который даст вам многоуровневый фоновый эффект.

 Jürgen Paul11 апр. 2012 г., 16:27
Разве это не создаст много изображений Немо, движущихся слева направо?
 11 апр. 2012 г., 16:35
Это зависит от того, как вы делаете анимированный GIF. GIF должен быть одним изображением плавающего туда-сюда немо.

Ваш ответ на вопрос