HTML5+CSS3实现轮播图

HTML5+CSS3来实现轮播图
利用CSS3的新属性Animation，主要是利用CSS3的动画的特性，不需要任何JS技术即可实现轮播图：

下面就是我实现轮播图的步骤
（1）、先用@keyframes创建一个动画

@keyframes identifier {
        from{
              /*初始状态*/
        }to{
             /*结束状态*/
        }
    }

（2）、通过animation 来配置动画效果

animation-name: move;            //需要执行那个动画名move
animation-duration: 30s;             //动画执行的时间为30s
animation-iteration-count: infinite;  //动画迭代次数为无限循环 infinite
animation-timing-function: steps(5);   //动画分5步完成（5张图片）

HTML代码

    
    
    
    


    

        

            
div1
            
div2
            
div3
            
div4
            
div5