CSS3 Multiple backgrounds 和 CSS3 Animation

CSS3多背景与背景动画

背景动画

我非常喜欢CSS3 Multiple backgrounds和CSS3 Animation,如果把这两种技术组合在一块,就可以实现丰富多彩的背景动画了。

如果想要得到更广泛的浏览器支持的话,配合脚本库来实现,那就会得到更强的网页可用性和用户体验了,MooTools 动画就是我常用的选择。

CSS3多背景兼容性列表:

CSS3多背景兼容性列表

看了上面的CSS3多背景兼容性列表以后,下一步我就来实现多背景重叠效果,再也不用使用多个<div>position:absolute;来实现了。

The CSS3 Code:

1
2
3
background-image: url(grass1.png), url(redball.png), url(tree1.png), url(clouds1.png), url(bluesky.png);
background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
background-repeat: repeat-x, no-repeat, repeat-x, repeat-x, repeat-x;

范例书写如果你不喜欢的话,还可以简写。

1
background: url(grass1.png) repeat-x 0 0, url(redball.png) no-repeat  0 0, url(tree1.png) repeat-x  0 0, url(clouds1.png) repeat-x  0 0, url(bluesky.png) repeat-x  0 0;

多重背景已经实现了,那会移动的背景动画又如何实现?不防先看一下

CSS3 Animation 兼容性列表:

 CSS3 Animation 兼容性列表

好像不太乐观,火狐的支持情况不太好!Webkit 核心的支持的不错,那就先看看Webkit下的CSS3 Animation 吧!

The CSS3 Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@-webkit-keyframes Parallax{
     from {
        background-position:0 0, 0 0, 0 0, 0 0, 0 0;
     }
     to {
        background-position:-5400px 0, -4600px 0, -3800px 0, -3000px 0;
     }
}
.multiback {
width: 650px;
height: 180px;
/*background-image: url(grass1.png), url(redball.png), url(tree1.png), url(clouds1.png), url(bluesky.png);
background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
background-repeat: repeat-x, no-repeat, repeat-x, repeat-x, repeat-x;*/
background: url(grass1.png) repeat-x 0 0, url(redball.png) no-repeat  0 0, url(tree1.png) repeat-x  0 0, url(clouds1.png) repeat-x  0 0, url(bluesky.png) repeat-x  0 0;
 
-webkit-animation-name: Parallax;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}

查看 Webkit CSS3 Animation 演示

正如我看到的演示目前只有 Safari,Chrome,Opera浏览器支持CSS3 Animation。IE和Firefox 只能使用脚本动画来实现了。

基于MooTools 背景动画

The MooTools JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
window.addEvent("domready",function() {
	if(Browser.ie || Browser.firefox){
		//settings
		var duration = 40000;
		var length = 2000;
		var count = 0;
 
		var tweener;
 
		// Executes the standard tween on the background position
		var run = function() {
			tweener.tween("background-position","-" + (++count * length) + "px 0px");
		};
 
		// Defines the tween
		tweener = $("animatedback").setStyle("background-position","0px 0px").set("tween",{ 
			duration: duration, 
			transition: Fx.Transitions.linear,
			onComplete: run,
			link: "cancel"
		});
 
		// Starts the initial run of the transition
		run();	
	}
});

查看 Webkit CSS3 Animation 演示

参考文章:

站点统计