In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article mainly shows you "how to use pure css to achieve seamless scrolling", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure css to achieve seamless scrolling" this article.
Seamless scrolling realized by pure css
# outer {
Width: 600px
Height: 200px
Overflow: hidden
Position: relative
}
# inner {
Overflow: hidden
Width: 1800px
Height: 200px
Position: absolute
Left: 0px
Top: 0px
Animation:move 10s cubic-bezier (0.36,0.35,1,1) infinite
}
# inner img {
Width: 150px
Height: 200px
Float: left
}
@ keyframes move {
0% {left: 0px;}
100% {left:-900px;}
}
000000000
11111111111
/ * var btn1=document.getElementsByTagName ('button') [0]
Var btn2=document.getElementsByTagName ('button') [1]
Var outer=document.getElementById ('outer')
Var inner=document.getElementById ('inner')
Outer.onmouseover=function () {
Inner.style.animationPlayState='paused'
}
Outer.onmouseleave=function () {
Inner.style.animationPlayState='running'
} * /
1. Structural construction:
You can use the ul li structure to hold the img (it is easier for me to directly leave the img in the div). Twice, the width of the div,outer is less than the width of the inner inner to facilitate scrolling by changing the value of the inner left.
Second, the rolling thought:
There are two basic ideas for seamless scrolling here.
The first is achieved by gradually increasing the scrollLeft of the parent element.
The second: through the translate of css3, the second is used here.
Third, the realization of scrolling animation:
Mainly use animation animation:
The following two button buttons use JS to control seamless scrolling (js code is commented out)
This is a relatively ugly CSS seamless scrolling, like the direct copy away!
The above is all the content of the article "how to use pure css to achieve seamless scrolling". 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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.