CSS3 How do I implement a carousel diagram? The method of CSS3 to implement the carousel picture

We often see on the Web page there will be a lot of pictures to switch back and forth, this is the Carousel diagram, the advent of the carousel, so that important information can be found in a location, then, how to implement the Carousel diagram? The implementation of the Carousel diagram can be either JS or CSS, this article will give you a brief introduction of how CSS3 to achieve the effect of the carousel chart.

CSS3 implementation of the carousel effect can take advantage of CSS3 animation properties and @keyframes rules.

The Ainimation animation effect is composed of two main parts:
1. Declare an animation by a frame similar to the one in Flash animation;
2. The animation of the Keyframe declaration is called in the animation property.

The animation property is a shorthand attribute (recommended video lesson: CSS Tutorial)

Syntax: animation:name duration timing-function delay iteration-count direction.

Animation attribute values are not introduced here, you can refer to the CSS manual if necessary.

Let's take a look at the following example:

Html:

<div id= "Container" >    <div id= "Photo" >                            </div></div>

Css:

#container {    width:400px;    height:300px;    Overflow:hidden;} #photo {    width:1200px;    Animation:switch 5s ease-out Infinite;} #photo > img {    float:left;    width:400px;    height:300px;} @keyframes Switch {    0, 25% {        margin-left:0;    }    35%, 60% {        margin-left: -400px;    }    70%, 100% {        margin-left: -800px;    }}

Description

Display container size and picture size consistent

Add float effect to picture without having to worry about the problem of margin

Because the example has only three pictures, three animation stages have been added, each of which is achieved by setting the increment Margin-left value to the effect of switching

The animation stage (such as: 35%~60%) is the animation Stop section, and the previous stage free time (such as 25%~35%) is the animation switch part, the part of the time required to control their own.

This article for the simple introduction of the CSS Carousel Diagram effect of the implementation, more about the effect of CSS carousel map, we can go to see the PHP Chinese Web special effects download.