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:
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 演示
参考文章:
转自:http://blog.moocss.com/tutorials/mootools-tutorials/1591.html