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

CSS3动画尽管目前只有webkit内核的一些浏览器才支持，但是作为一个前端从业者，应该有长远的目光，尽早的去熟悉，今天就用CSS3做了一个照片长廊的应用，效果图：
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></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;
	-webkit-animation-direction:alternate;;
}

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

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

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

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类