武林網(www.survivalescaperooms.com)文章簡介：CSS3動畫盡管目前只有webkit內核的一些瀏覽器才支持，但是作為一個前端從業者，應該有長遠的目光，盡早的去熟悉，今天就用CSS3做了一個照片長廊的應用.

CSS3動畫盡管目前只有webkit內核的一些瀏覽器才支持，但是作為一個前端從業者，應該有長遠的目光，盡早的去熟悉，今天就用CSS3做了一個照片長廊的應用，效果圖：

Demo地址：請使用safari或者chrome猛擊
制作步驟如下：
1.首先我們鋪設一個漸變的背景色：

DaimaRen.cn © 2009-2010 by Tomie Zhang

%to

這是webkit內核的瀏覽器的寫法（注由于CSS3動畫其他內核瀏覽器暫時不能完全支持，所以本例沒有考慮兼容，只針對webkit），意思是讓body的背景從上往下漸變，漸變色從F9F9F9到5F5F5F。

2.設置一個容器來放置照片：

DaimaRen.cn © 2009-2010 by Tomie Zhang

-webkit-animation-name: goleft;/*關鍵幀名稱*/ -webkit-animation-duration: 15s;/*播放間隔時間*/ -webkit-animation-iteration-count:infinite;/*循環次數*/ -webkit-animation-

因為我設置的單個圖片寬是300px，一共放了5張，所以總寬度設置為1500，并讓它浮起來，最關鍵的是下面的那幾句，也是給它設置動畫效果。每一句的作用見代碼注釋，如果想詳細了解，可以查閱W3C的草案

3.設置關鍵幀動作。
這個是重點，你的動畫想有什么效果就在這里設置：

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-webkit-keyframes goleft { from -webkit-animation-timing-function% -webkit-animation-timing-function% -webkit-animation-timing-function% -webkit-animation-timing-function:ease-in-in; } to

這里就是對goleft的關鍵幀的描述，其實也就是每一步步進的距離。
還不夠炫，再加點東西：

DaimaRen.cn © 2009-2010 by Tomie Zhang

.player a:hover img { -webkit-animation-name: zoomIn; -webkit-animation-duration: 5s; -webkit-animation-iteration-count:infinite; -webkit-animation-

設置當鼠標移到圖片上時，這張圖片放大，這里我們又設置了一個叫zoomIn的關鍵幀，下面是它的描述：

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-webkit-keyframes zoomIn { from { -webkit-transform% { -webkit-transform% { -webkit-transformto { -webkit-transform

這里用到了CSS的轉換屬性里的放大效果，定義了每一步的放大尺寸，使得圖片能夠平穩的放大。
光看圖似乎不夠哦，加點音樂吧：

DaimaRen.cn © 2009-2010 by Tomie Zhang

<div id="mbox"><audio src="" autoplay="false" controls="true"></audio></div>

用html5的音頻標簽添加一個播放器，聽著歌看著X圖。。。。。囧
最后再加個假的音樂均衡器吧：

DaimaRen.cn © 2009-2010 by Tomie Zhang

<div id="mBar"> <span></span> <span></span> <span></span> <span></span> <span></span></div>

先寫幾個空的標簽，然后我們繼續用CSS3來控制它：

DaimaRen.cn © 2009-2010 by Tomie Zhang

-webkit-animation-name: bar; -webkit-animation-duration: 3s; -webkit-animation-iteration-count:infinite; -webkit-animation--webkit-gradient%tospan-webkit-animation-name: bar; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:infinite; -webkit-animation--webkit-gradient%tospan-webkit-animation-name: bar; -webkit-animation-duration: 1s; -webkit-animation-iteration-count:infinite; -webkit-animation--webkit-gradient%tospan-webkit-animation-name: bar; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:infinite; -webkit-animation-span-webkit-animation-name: bar; -webkit-animation-duration: 3s; -webkit-animation-iteration-count:infinite; -webkit-animation-

用CSS3選擇器很方便的給不同的標簽定義不同時常的關鍵幀（這樣就可以讓它們出現錯落的伸縮狀態，以模擬一個音頻波的效果），定義關鍵幀：

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-webkit-keyframes bar { from to

OK,這樣一個完全無需JS的照片長廊就大功告成了，是不是很簡單呢？發揮你的想象力也來CSS3吧！
附送一個使用CSS3的游戲：