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

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

　　Demo地址：请使用safari或者chrome猛击

　　制作步骤如下：

　　1.首先我们铺设一个渐变的背景色：

　　DaimaRen.cn © 2009-2010 by Tomie Zhang

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

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

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

　　DaimaRen.cn © 2009-2010 by Tomie Zhang

　　.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.设置关键帧动作。

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

　　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:hover img {

　　-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/

评论总数：0 条 [ 查看全部 ] 网友评论