Home  >  Article  >  Web Front-end  >  CSS3 implements carousel effect 2

CSS3 implements carousel effect 2

WBOY
WBOYOriginal
2016-09-15 11:15:131339browse

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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn