CSS3实现轮播图效果2

先前用css3做了一个一张图片实现的轮播，但是这样的图片很难找，于是又改进了一下。

HTML：

<div class="box">    <ul>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></div>

登录后复制

CSS：

        .box{            position: relative;            width: 500px;            height: 300px;            overflow: hidden;            margin: 100px auto;        }        div ul{            position: relative;            top: 0;            left: 0;            width: 400%;            height: 100%;            overflow: hidden;            margin: 0;            padding: 0;            animation: lb 12s  cubic-bezier(0.3,0.4,0.3,1) 0s infinite;        }        @keyframes lb {            0%{                left: 0%;            }            25%{                left: -100%;            }            50%{                left: -200%;            }            75%{                left: -300%;            }            100%{                left: 0%;            }        }        .box ul li{            float: left;            height: 100%;            list-style: none;            width: 25%;        }        .box ul li:nth-of-type(1){            background-color: #999;        }       .box ul li:nth-of-type(2){            background-color: #FEA;        }        .box ul li:nth-of-type(3){            background-color: #F00;        }        .box ul li:nth-of-type(4){            background-color: #000;        }

登录后复制

原理和上次轮播差不多，让ul改变位置。轮播图片，在li里放图片即可。