CSS3實現輪播圖效果2-html教學-PHP中文網

CSS3實現輪播圖效果2

WBOY

發布： 2016-09-15 11:15:13

原創

1345 人瀏覽過

先前用CSS3做了一個圖片實現的輪播，但是這樣的圖片很難找，於是又改進了一下。

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>

登入後複製

原理跟上次輪播差不多，讓ul改變位置。輪播圖片，在li裡放圖片即可。