Shulou(Shulou.com)06/01 Report--

This article is about how CSS implements scrolling in the picture bar. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The main principle is to move to the left through animation.

First, give two groups of the same pictures (on the same line), and let the whole picture move the length of one set of pictures to the left.

This quickly reverts to the original position at the end of the animation, which alternates with the second set of pictures, which looks like a group of pictures are constantly rolling to the left.

The specific steps are as follows:

1. Set up two groups of the same pictures everywhere in the body code.

2. Set the size of the nav. The width is the width added by a group of pictures, and the height is the height of the picture.

Nav {

Width:750px

Height:170px

Border:1pxsolidred

Margin:100pxauto

}

3. Set the ul size, twice the width of nav, the same height as nav, and specify animation-related attributes.

Ul {

Width:200%

Height:100%

Animation:picmove5slinearinfiniteforwards

}

4. Define the animation, mainly to move the length of a group of pictures to the left

@ keyframespicmove {

From {

Transform:translate (0)

}

To {

Transform:translate (- 750px)

}

}

5. Increase the effect of mouse hover and animation pause.

Ul:hover {

Animation-play-state:paused

}

6. Finally, add overflow:hidden to nav so that the excess part is hidden, so that the scrolling picture bar as a whole is done.

The overall code is as follows

Document

* {

Margin:0

Padding:0

}

Ul {

List-style:none

}

Nav {

Width:750px

Height:170px

Border:1pxsolidred

Margin:100pxauto

Overflow:hidden

}

Ul {

Width:200%

Height:100%

Animation:picmove5slinearinfiniteforwards

}

@ keyframespicmove {

From {

Transform:translate (0)

}

To {

Transform:translate (- 750px)

}

}

Img {

Width:250px

Height:170px

Float:left

}

Ul:hover {

Animation-play-state:paused

}

Thank you for reading! This is the end of the article on "how to achieve scrolling picture bar in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.