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

问题描述

我有两个背景：

  body {
 background-image：url（img / nemo.png） ，url（img / ocean.png）; 
} 
  

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

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

解决方案

这可以使用纯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-name animation-duration animation-timing-function animation-delay animation-iteration-count < a href =https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction =nofollow noreferrer> animation-direction ;

此功能是试验性的，因此供应商前缀（例如 -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屋！