Home > Article > Web Front-end > CSS3 implements carousel effect 2
I used CSS3 to create a carousel one by one, but it was hard to find such pictures, so I improved it again.
HTML:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
CSS:
<span style="color: #800000;"><style> .box</span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 100px auto</span>; }<span style="color: #800000;"> div ul</span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 400%</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> animation</span>:<span style="color: #0000ff;"> lb 12s cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>; }<span style="color: #800000;"> @keyframes lb </span>{<span style="color: #ff0000;"> 0%{ left</span>:<span style="color: #0000ff;"> 0%</span>; }<span style="color: #800000;"> 25%</span>{<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> -100%</span>; }<span style="color: #800000;"> 50%</span>{<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> -200%</span>; }<span style="color: #800000;"> 75%</span>{<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> -300%</span>; }<span style="color: #800000;"> 100%</span>{<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> 0%</span>; }<span style="color: #800000;"> } .box ul li</span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 25%</span>; }<span style="color: #800000;"> .box ul li:nth-of-type(1)</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #999</span>; }<span style="color: #800000;"> .box ul li:nth-of-type(2)</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #FEA</span>; }<span style="color: #800000;"> .box ul li:nth-of-type(3)</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #F00</span>; }<span style="color: #800000;"> .box ul li:nth-of-type(4)</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #000</span>; }<br><br><span style="color: #800000;"></style></span>
The principle is similar to the last carousel, let ul change its position. To carousel pictures, just put pictures in li.