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