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