css3几张图片交替出现
demo地址:http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/
1.首先图片的数目n,每张图片显示的时间t
2.主要使用CSS3的animation方法
3.设置每张图片的animation-duration(即动画的持续时间)为nt。但是animation-timing-function中的0到t/nt中实现图片的显示动作,后面的百分比都是消失
4.设置每张图片的animation-delay为t的倍数,例如第一个不用设置,第二个为t,第三个为2t这样下去。
5.这样的设置是为了实现各个图片的交替出现,还有后面的再出现。再出现还要设置animation-iteration-count为infinite。
最后,参考实例:http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/