background: -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(#5F5F5F));
这是webkit内核的浏览器的写法(注由于CSS3动画其他内核浏览器暂时不能完全支持,所以本例没有考虑兼容,只针对webkit),意思是让body的背景从上往下渐变,渐变色从F9F9F9到5F5F5F。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)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.设置关键帧动作。
这个是重点,你的动画想有什么效果就在这里设置:
@-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的关键帧,下面是它的描述:
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)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的转换属性里的放大效果,定义了每一步的放大尺寸,使得图片能够平稳的放大。
光看图似乎不够哦,加点音乐吧:
div id="mbox"audio src="http://nio.name/content/mp3/09.mp3" autoplay="false" controls="true"/audio/div
用html5的音频标签添加一个播放器,听着歌看着X图。。。。。囧
最后再加个假的音乐均衡器吧:
div id="mBar"span/spanspan/spanspan/spanspan/spanspan/span/div
先写几个空的标签,然后我们继续用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/