Home > Developer > JavaScript
Css3 implements the animation scroll bar and css3 implements the animation scroll bar.
Let's give you a picture. It seems simple, but it is actually very easy to implement ~ Simple and practical
The font in the black box will automatically scroll to form a scroll bar, which can be used for display and prompt. First, we need to write the text we want in the body.
<Body> <div id = "div"> <ul id = "ul"> <li> sense </li> <li> good </li> <li> click </li> <li> push </li> <li> suggestion </li> </ul> </div> </body>
Next we will adjust the style in the style to implement its scrolling
<Style>
/* First remove the underline */ul, li, ol {list-style: none ;}
/* Here is the key point. The time segment passes through 0% until the scrolling time is reached, so left is 0, when the rolling start time is stopped, it means that all is finished, that is, 100%. If this sentence is not correctly written, it will not work. */@-webkit-keyframes move {0% {left: 0;} 100% {left:-400px ;}}
/* The following is the layout style */# div {width: 500px; height: 100px; margin: 100px auto; border: 5px solid green; position: relative; overflow: hidden ;} # ul {position: absolute; padding: 0; margin-top: 0px; width: 185%; display: block;
/* This sentence is also crucial. If this sentence is missing, it will not scroll. I will give him four values. 3 s indicates that the rolling will be completed within three seconds, the move name corresponds to the name of the above time segment. infinite indicates cyclic scrolling, and linear indicates uniform scrolling */
-Webkit-animation: 3 s move infinite linear;} # ul li {float: left; background: black; color: white; margin-left: 1px; width: 100px; height: 100px; text-align: center; line-height: 100px;}/* This statement indicates that moving the mouse to scroll will stop, similar to carousel */# div: hover # ul {-webkit-animation-play-state: paused ;}</style>
The above is all the code for implementing the scroll bar. If you think you like it, click "recommended". Thank you ~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
