首页  >  文章  >  web前端  >  css3实现动画滚动条

css3实现动画滚动条

WBOY
WBOY原创
2016-08-04 08:53:131518浏览

先给大家一张效果图,看似简单,其实实现起来....那也是非常简单的~简单又实用

黑框里面的字体会自动滚动,形成滚动条,可以用于展示和提示,首先我们先要在body里面写上自己想要的文字,比如我想写:感觉好的请点击推荐

        <div id="<span" style="color: #800000;">"<span style="color: #800000;">div</span><span style="color: #800000;">"</span>>
        <ul id="<span" style="color: #800000;">"<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>
    

接下来我们在在style样式里面调整样式,实现他的滚动

<span style="color: #800000;"><style><br />  /*先给个整体去除下划线*/
        ul,li,ol</style></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;">
        
    </span>

 

以上是实现滚动条的所有代码,觉得赞的人可以点击推荐谢谢~

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn