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

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 {

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