CSS3 implements carousel effect

CSS3 implements carousel images mainly by css: background-position and css3: animation. And to realize this carousel, you need a picture with four pictures connected horizontally.

Note (Internet Explorer 10, Firefox, and Opera support the animation property. Safari and Chrome support the alternative -webkit-animation property.)

HTML:

 <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="slide-box"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

CSS:

<span style="color: #800000;"><style>
    @-webkit-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @-moz-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @-o-keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    @keyframes slide </span>{<span style="color: #ff0000;">
        0% {
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
        10%, 25% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -600px 0</span>;
        }<span style="color: #800000;">
        35%, 50% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1200px 0</span>;
        }<span style="color: #800000;">
        60%, 75% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> -1800px 0</span>;
        }<span style="color: #800000;">
        85%, 100% </span>{<span style="color: #ff0000;">
            background-position</span>:<span style="color: #0000ff;"> 0 0</span>;
        }<span style="color: #800000;">
    }
    .slide-box </span>{<span style="color: #ff0000;">
        margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;<span style="color: #ff0000;">
        background</span>:<span style="color: #0000ff;"> url(http://sandbox.runjs.cn/uploads/rs/376/uazzmdfd/bg.png) 0 0 no-repeat</span>;<span style="color: #ff0000;">
        -webkit-animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;<span style="color: #ff0000;">
        -o-animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;<span style="color: #ff0000;">
        animation</span>:<span style="color: #0000ff;"> slide 8s linear infinite</span>;
    }<span style="color: #800000;">
</style></span>

The

animation attribute is a shorthand attribute, JavaScript syntax: object.style.animation=" slide 8s linear infinite", its parameters are as follows:

animation-name	Specifies the keyframe name that needs to be bound to the selector. .
animation-duration	Specifies the time it takes to complete the animation, in seconds or milliseconds.
animation-timing-function	Specify the speed curve of animation.
animation-delay	Specifies the delay before the animation starts.
animation-iteration-count	Specifies the number of times the animation should be played.
animation-direction	Specifies whether the animation should be played in reverse in turn.

Let the image move within 8 seconds, moving 600px to the left each time, and finally return to the original point. The div is 600px wide, just enough to accommodate one image, thus forming a carousel effect.