Home > Article > Web Front-end > How to implement image carousel using pure CSS
How to implement image carousel using pure CSS
- 醉折花枝作酒筹Original
- 2021-04-02 14:42:024177browse
In CSS, you can use animation attributes and @keyframes rules to achieve image carousel effects. Just use @keyframes to create the animation first; then use the animation attribute to set the time, speed and number of animations required.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer
First prepare multiple pictures of the same size, and the pictures will be displayed horizontally Placed in an image container. Add a display container outside the image container. The size of the display container is the size of the image. Add a custom animation to the image container and set incremental offset values at different stages of the animation.
The animation effect is divided into two parts: switching and staying. The custom animation stage is related to the number of pictures, and the offset value of each stage of the animation is related to the picture size.
The example in this article is to switch from the first picture to the last picture.
HTML
<body>
<div id="container">
<div id="photo">
<img src="images/1.jpg" / alt="How to implement image carousel using pure CSS" >
<img src="images/2.jpg" / alt="How to implement image carousel using pure CSS" >
<img src="images/3.jpg" / alt="How to implement image carousel using pure CSS" >
</div>
</div>
</body>Analysis:
Three img elements are created here. Outside the img element is a picture container, and outside the picture container is a display container.
CSS
<style type="text/css">
#container {
width: 400px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}
</style>Rendering:
Analysis:
The size of the display container is the same as the size of the image;
Add a float effect to the image, without having to consider the troublesome margin problem;
Since the example only has three pictures, three animation stages are added. Each stage achieves the switching effect by setting an increasing margin-left value;
set animation The stage (for example: 35%~60%) is the animation stay 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.
Recommended study: "css video tutorial"
The above is the detailed content of How to implement image carousel using pure CSS. For more information, please follow other related articles on the PHP Chinese website!