首页 > > 网页制作 > css >

CSS3实现轮播图效果2

2018-06-24 00:22:24来源：未知阅读 ()

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

HTML：

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

CSS：

<style>
        .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;
        }

</style>