Home >Web Front-end >HTML Tutorial >css3 implements animated scroll bar

css3 implements animated scroll bar

WBOYOriginal: 2016-08-04 08:53:131547browse

Let me give you a rendering first. It seems simple, but actually it is very simple to implement. It is simple and practical

The fonts in the black box will automatically scroll to form a scroll bar, which can be used for display and prompts. First, we need to write the text we want in the body. For example, I want to write: If you feel good, please click to recommend

<body>
        <div id=<span style="color: #800000;">"</span><span style="color: #800000;">div</span><span style="color: #800000;">"</span>>
        <ul id=<span style="color: #800000;">"</span><span style="color: #800000;">ul</span><span style="color: #800000;">"</span>>
            <li>感</li>
            <li>觉</li>
            <li>好</li>
            <li>的</li>
            <li>请</li>
            <li>点</li>
            <li>击</li>
            <li>推</li>
            <li>荐</li>
        </ul>
        </div>
    </body>

Next we adjust the style in the style to realize its scrolling

<span style="color: #800000;"><style><br>　　/*先给个整体去除下划线*/
        ul,li,ol</span>{<span style="color: #ff0000;">
            list-style</span>:<span style="color: #0000ff;"> none</span>;
        }<br>　　<br><span style="color: #800000;">/*这里也就是重点喽，时间分段，到还没滚动的时候时间经过了0%所以left也就为0，当开始滚动时间停止的时候那么就等于全部完成也就是100%，这句话写不对效果就不出哦*/
        @-webkit-keyframes move </span>{<span style="color: #ff0000;">
                0% {
                    left</span>:<span style="color: #0000ff;"> 0</span>;
                }<span style="color: #800000;">
                100% </span>{<span style="color: #ff0000;">
                    left</span>:<span style="color: #0000ff;"> -400px</span>;
                }<span style="color: #800000;">
            }
       <br>/*以下是布局样式*/  
        #div</span>{<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 100px auto</span>;<span style="color: #ff0000;">
            border</span>:<span style="color: #0000ff;"> 5px solid green</span>;<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">    
            overflow</span>:<span style="color: #0000ff;"> hidden</span>;    
        }<span style="color: #800000;">
        #ul</span>{<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">        
            padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
            margin-top</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">    
            width</span>:<span style="color: #0000ff;"> 185%</span>;<span style="color: #ff0000;">
            display</span>:<span style="color: #0000ff;"> block</span>;<br>/*这句话也是至关重要的，少了这句话也不会滚动，我给他四个值，3s代表三秒之内完成滚动，move这个名字对应着上面时间分段的名字，infinite代表循环滚动，linear表示匀速滚动*/<br><span style="color: #ff0000;">
            -webkit-animation</span>:<span style="color: #0000ff;"> 3s move infinite linear</span>;
        }<span style="color: #800000;">
        #ul li</span>{<span style="color: #ff0000;">
            float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> black</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">
            margin-left</span>:<span style="color: #0000ff;"> 1px</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">    
            text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
            line-height</span>:<span style="color: #0000ff;"> 100px</span>;
        }
        
        
        <span style="color: #008000;">/*这句话代表鼠标移动上去滚动会</span><span style="color: #008000;">停止，类似于轮播</span><span style="color: #008000;">*/</span><span style="color: #800000;">
        #div:hover #ul </span>{<span style="color: #ff0000;">
        -webkit-animation-play-state</span>:<span style="color: #0000ff;"> paused</span>;
            }<span style="color: #800000;">
        
    </style></span>

The above is all the code to implement the scroll bar. If you like it, you can click to recommend it. Thank you~

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Descendant selectors and multi-class selectors after CSSNext article：Descendant selectors and multi-class selectors after CSS

See more

css3 implements animated scroll bar

Related articles