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

这里用到了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></span>
	<span></span>
	<span></span>
	<span></span>
	<span></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;
	-w

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!