Previously with CSS3 made a picture of the implementation of the carousel, but such a picture is difficult to find, and then improved a bit.
Html:
<Divclass= "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>
The principle is similar to the last carousel, let ul change position. Carousel Pictures, put pictures in Li.
CSS3 implementation of Carousel Chart effect 2