栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程:认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
CSS3实例应用:制作照片长廊
www.jz123.cn 2010-04-20 来源: 代码人 责任编辑(袁袁) 我要投递新闻
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/
上一篇:CSS样式表在网页设计中的特性 下一篇:如何用CSS将图片显示成圆角