利用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>

 效果如下：