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

This article "how to use CSS to achieve scrolling picture bar" article, the article sample code introduction is very detailed, with a certain reference value, interested friends must refer to, for "how to use CSS to achieve scrolling picture bar", Xiaobian sorted out the following knowledge points, please follow the pace of the editor step by step slowly understand, then let us enter the topic.

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

}

What is csscss is a computer language used to express file styles such as HTML or XML. It is mainly used to design the style of the web page and make the web page more beautiful. It is also a language that defines style structures such as fonts, colors, locations, etc., and css styles can be stored directly in HTML pages or separate style sheet files, while the priority of style rules is determined by css according to this hierarchical structure, so as to achieve cascading effect. Up to now, css can not only decorate the web page, but also cooperate with various scripts to format the web page.

The above is all the content of the article "how to use CSS to achieve scrolling picture bar". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.