移动无限使用CSS多背景 [英] Move multiple backgrounds infinitely using CSS

问题描述

我有两个背景：

  {体
    背景图像：网址（IMG / nemo.png），网址（IMG / ocean.png）;
}
 

如何让 nemo.png背景由左，右移动无限，但不影响 ocean.png背景 ？

编辑：：当他到达最右边缘（与图像不再可见），他将再次出现在左边缘开始做自左到右的漂移

解决方案

这可以用纯CSS 3，如的关键帧动画的：

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

{体
    背景图像：网址（http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif），网址（http://images2.layoutsparks.com/1/ 200022 /海洋的梦想 - 蓝 - waves.jpg）;
    背景重复：不重复;
    背景位置：50％0％，0;
    -moz-动画：游泳2秒线性0无穷;
    -webkit-动画：游泳2秒线性0无穷;
    动画：游泳2秒的无限线性0;
}
@ -moz-关键帧游泳{
    从{背景位置：200％0 0 0; }
    为{背景位置：-100％0 0 0; }
}
@ -webkit-关键帧游泳{
    从{背景位置：200％0 0 0; }
    为{背景位置：-100％0 0 0; }
}
@keyframes游泳{
    从{背景位置：200％0 0 0; }
    为{背景位置：-100％0 0 0; }
}


语法

  

动画 ： 动画名 动画持续时间 的 动画定时功能 的 动画延迟 的 动画迭代计数 的 动画方向 ;

该功能是实验性的，所以于供应商prefixes（如 -webkit - ）已被添加（见的我可以使用CSS3动画兼容性注释）。在我的演示中，我使用所有的属性，除了最后一个。

I have two backgrounds:

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

How do I make nemo.png background move infinitely from left-right but not affecting ocean.png background?

EDIT: When he reaches the right most edge (and the image is no longer visible), he will appear from the left edge again and start doing the drifting from left-to-right.

解决方案

This can be done with pure CSS 3, e.g keyframed animations:

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;

The feature is experimental, so vendor-prefixes (eg -webkit-) have to be added (see also Can I use CSS3 Animation for compatibility notes). In my demo, I've used all properties, except for the last one.

这篇关于移动无限使用CSS多背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！