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/

转载于:https://www.cnblogs.com/zhuyingyan/archive/2012/07/19/2599952.html