css 做幻灯片效果

 设置一个div 盒子

  <div class="ani"></div>

　　

设置css 样式

 

    .ani{
             width:480px;
             height:320px;
             margin:50px auto;
             overflow: hidden;
             box-shadow: 0 0 5px rgba(0,0,0,1);
             background-size:cover;
             background-position: center;
             -webkit-animation-name:"loops";
             -webkit-animation-duration:20s;
             -webkit-animation-iteration-count:infinite;
        }

        @-webkit-keyframes "loops"{
            0%{
             background: url(img/advert_1.jpg) no-repeat;
            }
            25%{
             background: url(img/advert_2.jpg) no-repeat;
            }
            50%{
             background: url(img/advert_3.jpg) no-repeat;
            }
            75%{
             background: url(img/advert_4.jpg) no-repeat;
            }
            100%{
             background: url(img/advert_5.jpg) no-repeat;
            }
        }