Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the css round broadcast map". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to realize the css round broadcast map"!

Specific operation steps:

1. Three pictures of the same size are prepared, and the file name of the picture is 1.pngjournal 2.pngjournal 3.png.

2. Put the pictures you want to display horizontally in a picture container.

3. Add a display container to the picture container. The size of the picture is the size of the display container.

The specific operation code is as follows:

4. Add custom animation to the picture container and set incremental offset values at different stages of the animation. (the float effect is added to the code in the image, so there is no need to consider the margin problem. The animation stage set in the code (such as 35% / 35%) is the remaining part of the animation, and the free time in the previous stage (such as 25% / 35%) is the animation switching part, and the length of time can be controlled by yourself. )

# 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

}

}

At this point, I believe you have a deeper understanding of "how to achieve css broadcast". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.