首页 > 代码库 > CSS3实现轮播图效果2

CSS3实现轮播图效果2

先前用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>

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

CSS3实现轮播图效果2