In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-09-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
The market share of Chrome browser on the desktop has exceeded 70%, and users are complaining about
The world's first 2nm mobile chip: Samsung Exynos 2600 is ready for mass production.According to a r
A US federal judge has ruled that Google can keep its Chrome browser, but it will be prohibited from
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
About us Contact us Product review car news thenatureplanet
More Form oMedia: AutoTimes. Bestcoffee. SL News. Jarebook. Coffee Hunters. Sundaily. Modezone. NNB. Coffee. Game News. FrontStreet. GGAMEN
© 2024 shulou.com SLNews company. All rights reserved.