How to implement scrolling picture bar in CSS
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!
