CSS3实例应用:制作照片长廊

【 tulaoshi.com - Web开发 】

CSS3动画尽管目前只有webkit内核的一些浏览器才支持，但是作为一个前端从业者，应该有长远的目光，尽早的去熟悉，今天就用CSS3做了一个照片长廊的应用，效果图：

Demo地址：请使用safari或者chrome猛击
制作步骤如下：
1.首先我们铺设一个渐变的背景色：

background:  -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(#5F5F5F));

这是webkit内核的浏览器的写法（注由于CSS3动画其他内核浏览器暂时不能完全支持，所以本例没有考虑兼容，只针对webkit），意思是让body的背景从上往下渐变，渐变色从F9F9F9到5F5F5F。

2.设置一个容器来放置照片：

.player {width:1500px;position:absolute;left:0px;top:0px;-webkit-animation-name: goleft;/*关键帧名称*/-webkit-animation-duration: 15s;/*播放间隔时间*/-webkit-animation-iteration-count:infinite;/*循环次数*/-webkit-animation-direction:alternate;/*动画方向*/}

因为我设置的单个图片宽是300px，一共放了5张，所以总宽度设置为1500，并让它浮起来，最关键的是下面的那几句，也是给它设置动画效果。每一句的作用见代码注释，如果想详细了解，可以查阅W3C的草案

3.设置关键帧动作。
这个是重点，你的动画想有什么效果就在这里设置：

@-webkit-keyframes goleft {from {left: 0;-webkit-animation-timing-function:ease-in-out;}25% {left: -300px;-webkit-animation-timing-function:ease-in-in;}50% {left: -600px;-webkit-animation-timing-function:ease-in-out;}75% {left: -900px;-webkit-animation-timing-function:ease-in-in;}to {left: -1200px;}}

这里就是对goleft的关键帧的描述，其实也就是每一步步进的距离。
还不够炫，再加点东西：

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

设置当鼠标移到图片上时，这张图片放大，这里我们又设置了一个叫zoomIn的关键帧，下面是它的描述：

@-webkit-keyframes zoomIn {from {-webkit-transform: scale(1);}25% {-webkit-transform: scale(1.2);}50% {-webkit-transform: scale(1.4);}to {-webkit-transform: scale(1.6);}}

这里用到了CSS的转换属性里的放大效果，定义了每一步的放大尺寸，使得图片能够平稳的放大。
光看图似乎不够哦，加点音乐吧：

div id="mbox"audio src="http://nio.name/content/mp3/09.mp3" autoplay="false" controls="true"/audio/div

用html5的音频标签添加一个播放器，听着歌看着X图。。。。。囧
最后再加个假的音乐均衡器吧：

div id="mBar"span/spanspan/spanspan/spanspan/spanspan/span/div

先写几个空的标签，然后我们继续用CSS3来控制它：

#mBar span:nth-child(1){-webkit-animation-name: bar;-webkit-animation-duration: 3s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF00CC), to(#E8E8E8));}#mBar span:nth-child(2){-webkit-animation-name: bar;-webkit-animation-duration: 2s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;background: -webkit-gradient(linear, 0 0, 0 100%, from(#66FF00), to(#E8E8E8));}#mBar span:nth-child(3){-webkit-animation-name: bar;-webkit-animation-duration: 1s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF3300), to(#E8E8E8));}#mBar span:nth-child(4){-webkit-animation-name: bar;-webkit-animation-duration: 2s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;}#mBar span:nth-child(5){-webkit-animation-name: bar;-webkit-animation-duration: 3s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;;}

用CSS3选择器很方便的给不同的标签定义不同时常的关键帧（这样就可以让它们出现错落的伸缩状态，以模拟一个音频波的效果），定义关键帧：

@-webkit-keyframes bar {from {height:10px;}to {height:80px;}}

OK,这样一个完全无需JS的照片长廊就大功告成了，是不是很简单呢？发挥你的想象力也来CSS3吧！
附送一个使用CSS3的游戏：http://icefox.net/anigma/