How to use css3 to achieve automatic rotation effects of images (complete code attached)

This article introduces how to use css3 to realize the carousel effect of images, and focuses on the specific steps. The content of this article is compact, and I hope everyone can gain something.

When you browse the web, you will encounter a special effect called picture carousel: different pictures at the same position will play in a loop according to changes in time, achieving a kind of slide show similar to Effect. So how do we implement the carousel effect of images in the process of web development? This article will show you how to use css3 to achieve image carousel effects.

The main idea of ​​using css3 to achieve carousel effects

We will prepare multiple images of the same size in the same position, And place it horizontally in the div container, and then set a display container above the div container, where the size of the display container is the same as the size of the image. Finally, add a custom animation to the image container, and set incremental offset values ​​at different stages of the animation.

Note

The animation effect is divided into two parts: switching and staying.

The offset value of the animation is related to the image size.

The principle of using css3 to achieve carousel effects

First, you must ensure that the size of the display container is the same as the size of the image, and then add float effect, then determine the number of pictures to insert and set animation stages for each picture, where each stage achieves the switching effect by using keyframes to set increasing margin-left values.

Steps to use css3 to implement image carousel effects (code)

Step 1: Add images using HTML

<div id="container">
    <div id="photo">
        <img  src="1.png" / alt="How to use css3 to achieve automatic rotation effects of images (complete code attached)" >
        <img  src="2.png" / alt="How to use css3 to achieve automatic rotation effects of images (complete code attached)" >
        <img  src="3.png" / alt="How to use css3 to achieve automatic rotation effects of images (complete code attached)" >
    </div>
</div>

Step 2: Use css3 to set the animation stage

#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;
}
}

Rendering of image carousel

More cool CSS3 and javascript special effects codes are available at: js special effects collection

The above is the detailed content of How to use css3 to achieve automatic rotation effects of images (complete code attached). For more information, please follow other related articles on the PHP Chinese website!