您的位置：首页 > Web前端 > CSS

CSS3 Multiple backgrounds 和 CSS3 Animation

2015-01-08 15:47 1026 查看

CSS3多背景与背景动画

我非常喜欢CSS3 Multiple backgrounds和CSS3 Animation，如果把这两种技术组合在一块，就可以实现丰富多彩的背景动画了。
如果想要得到更广泛的浏览器支持的话，配合脚本库来实现，那就会得到更强的网页可用性和用户体验了，MooTools 动画就是我常用的选择。
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 兼容性列表：

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

The CSS3 Code:

@-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

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 演示

参考文章：

http://www.storiesinflight.com/html5/backgrounds.html
http://css-tricks.com/parallax-background-css3/
http://davidwalsh.name/mootools-animate-background

转自：http://blog.moocss.com/tutorials/mootools-tutorials/1591.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航