首页 > 开发 > CSS > 正文

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

2024-07-11 09:02:55
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:CSS3动画尽管目前只有webkit内核的一些浏览器才支持,但是作为一个前端从业者,应该有长远的目光,尽早的去熟悉,今天就用CSS3做了一个照片长廊的应用.

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

Demo地址:请使用safari或者chrome猛击
制作步骤如下:
1.首先我们铺设一个渐变的背景色:

DaimaRen.cn © 2009-2010 by Tomie Zhang

%to

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

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

DaimaRen.cn © 2009-2010 by Tomie Zhang

-webkit-animation-name: goleft;/*关键帧名称*/ -webkit-animation-duration: 15s;/*播放间隔时间*/ -webkit-animation-iteration-count:infinite;/*循环次数*/ -webkit-animation-

因为我设置的单个图片宽是300px,一共放了5张,所以总宽度设置为1500,并让它浮起来,最关键的是下面的那几句,也是给它设置动画效果。每一句的作用见代码注释,如果想详细了解,可以查阅W3C的草案

3.设置关键帧动作。
这个是重点,你的动画想有什么效果就在这里设置:

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-webkit-keyframes goleft { from -webkit-animation-timing-function% -webkit-animation-timing-function% -webkit-animation-timing-function% -webkit-animation-timing-function:ease-in-in; } to

这里就是对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-

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

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-webkit-keyframes zoomIn { from { -webkit-transform% { -webkit-transform% { -webkit-transformto { -webkit-transform

这里用到了CSS的转换属性里的放大效果,定义了每一步的放大尺寸,使得图片能够平稳的放大。
光看图似乎不够哦,加点音乐吧:

DaimaRen.cn © 2009-2010 by Tomie Zhang

<div id="mbox"><audio src="" autoplay="false" controls="true"></audio></div>

用html5的音频标签添加一个播放器,听着歌看着X图。。。。。囧
最后再加个假的音乐均衡器吧:

DaimaRen.cn © 2009-2010 by Tomie Zhang

<div id="mBar"> <span></span> <span></span> <span></span> <span></span> <span></span></div>

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

DaimaRen.cn © 2009-2010 by Tomie Zhang

-webkit-animation-name: bar; -webkit-animation-duration: 3s; -webkit-animation-iteration-count:infinite; -webkit-animation--webkit-gradient%tospan-webkit-animation-name: bar; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:infinite; -webkit-animation--webkit-gradient%tospan-webkit-animation-name: bar; -webkit-animation-duration: 1s; -webkit-animation-iteration-count:infinite; -webkit-animation--webkit-gradient%tospan-webkit-animation-name: bar; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:infinite; -webkit-animation-span-webkit-animation-name: bar; -webkit-animation-duration: 3s; -webkit-animation-iteration-count:infinite; -webkit-animation-

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

DaimaRen.cn © 2009-2010 by Tomie Zhang

@-webkit-keyframes bar { from to

OK,这样一个完全无需JS的照片长廊就大功告成了,是不是很简单呢?发挥你的想象力也来CSS3吧!
附送一个使用CSS3的游戏:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表