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/p/2599952.html