How to implement carousel chart in css3? How to implement carousel images in css3

We often see a location on a web page where a lot of pictures switch back and forth. This is the carousel image. The appearance of the carousel image allows important information to be displayed in one location. So, the carousel image is How is it achieved? The carousel chart can be realized with js or css. This article will introduce to you how to achieve the carousel chart effect with css3.

css3 can use CSS3 animation properties and @keyframes rules to achieve carousel effects.

ainimation mainly consists of two parts to achieve animation effects:
1. Declare an animation through frames similar to those in Flash animation;
2. Call the animation declared by key frames in the animation attribute.

animation attribute is a shorthand attribute (recommended video course: css tutorial)

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

The animation attribute value will not be introduced here. If necessary, you can refer to the css manual.

Let’s take a look at an example directly:

html：

<div id="container">
    <div id="photo">
        <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01c60259ac0f91a801211d25904e1f.jpg@1280w_1l_2o_100sh.jpg" />
    </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:

The size of the display container is the same as the size of the picture

Add float effect to the picture, no need to consider the troublesome margin problem

Since the example only has three pictures, three animations are added stage, each stage achieves the switching effect by setting an increasing margin-left value

The set animation stage (such as: 35%~60%) is the animation dwell part, and the free time of the previous stage ( For example, 25%~35%) is the animation switching part. The length of each part needs to be controlled by yourself.

This article briefly introduces the implementation of the CSS carousel effect. For more information about the effect of the CSS carousel, you can check out the Special Effects Download on the PHP Chinese website. .

Related recommendations:

CSS3 Implementation of Simple Carousel Image

Bootstrap Image Carousel Function Implementation

jQuery realizes the picture carousel slide effect

The above is the detailed content of How to implement carousel chart in css3? How to implement carousel images in css3. For more information, please follow other related articles on the PHP Chinese website!