css3长廊,CSS_CSS3实例应用:制作照片长廊，CSS3动画尽管目前只有webkit内核 - phpStudy...

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

W3C的草案

3.设置关键帧动作。

这个是重点，你的动画想有什么效果就在这里设置：

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-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的关键帧的描述，其实也就是每一步步进的距离。

还不够炫，再加点东西：

DaimaRen.cn © 2009-2010 by Tomie Zhang

.player a:hoverimg {

-webkit-animation-name: zoomIn;

-webkit-animation-duration: 5s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:alternate;

}

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

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-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的转换属性里的放大效果，定义了每一步的放大尺寸，使得图片能够平稳的放大。

光看图似乎不够哦，加点音乐吧：

DaimaRen.cn © 2009-2010 by Tomie Zhang

用html5的音频标签添加一个播放器，听着歌看着X图。。。。。囧

最后再加个假的音乐均衡器吧：

DaimaRen.cn © 2009-2010 by Tomie Zhang

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

DaimaRen.cn © 2009-2010 by Tomie Zhang

#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选择器很方便的给不同的标签定义不同时常的关键帧(这样就可以让它们出现错落的伸缩状态，以模拟一个音频波的效果)，定义关键帧：

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-webkit-keyframes bar {

from {

height:10px;

}

to {

height:80px;

}

}

OK,这样一个完全无需JS的照片长廊就大功告成了，是不是很简单呢？发挥你的想象力也来CSS3吧！

附送一个使用CSS3的游戏：http://icefox.net/anigma/