How to realize css Carousel Graph

Most people don't understand the knowledge points of this article "how to realize css carousel map", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "how to realize css carousel map".

realization idea

CSS image carousel is mainly used to achieve the CSS3 animation attribute and @keyframes. First, put the images you want to carousel into a div whose width is set to the sum of the widths of multiple images. Add a div to this div, set the width and height of this div to the width and height of an image, and set overflow to hidden.

Then set the animation properties, here there are four pictures in the carousel, so add four animation stages, 0%-20% is the animation stage of the first picture, 20%-25% is the stay stage, and so on.

specific code How CSS works on carousels- (yisu.com) div{ width: 300px; height: 168px; overflow: hidden; } #lunbotu{ width: 1200px; animation: lunbotu 6s linear ;/*lunbotu is the animation name, this animation lasts for 6s, the same speed */ } #lunbotu>img{ float: left; width: 300px; } @-webkit-keyframes lunbotu{ 0%,20%{ margin-left: 0; } 25%,45%{ margin-left: -300px; } 50%,70%{ margin-left: -600px; } 75%,100%{ margin-left: -900px; } }

The above is the content of this article about "how to realize css carousel map". I believe everyone has a certain understanding. I hope the content shared by Xiaobian will be helpful to everyone. If you want to know more relevant knowledge content, please pay attention to the industry information channel.