利用keyframes实现幻灯效果

源码如下：

<style>
@keyframes looppic{
    from{
        background:url(images/1.jpg); /*图片的地址*/
        }
    25%{                            /*可以依据不同的情况进行流程的百分百设置*/
        background:url(images/2.jpg);
        }
    75%{
        background:url(images/3.jpg);
        }
    to{
        background:url(images/1.jpg);
        }
    }
.keyframeslp{
    width:400px;
    height:200px;
    -webkit-animation:looppic  6s ease-in infinite;   /*浏览器前缀，好烦啊，但还得设置一下*/
    -moz--animation:looppic  6s ease-in infinite;   /* 名称  时间   运行方式  执行次数 */ 
    -o--animation:looppic  6s ease-in infinite;
    -ms--animation:looppic  6s ease-in infinite;
    }
</style>

<div class="keyframeslp"></div>

 

 效果如下：