css3实现动画滚动条

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

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

<body>
        <div id="div">
        <ul id="ul">
            <li>感</li>
            <li>觉</li>
            <li>好</li>
            <li>的</li>
            <li>请</li>
            <li>点</li>
            <li>击</li>
            <li>推</li>
            <li>荐</li>
        </ul>
        </div>
    </body>

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

<style>
　　/*先给个整体去除下划线*/
        ul,li,ol{
            list-style: none;
        }
　　
/*这里也就是重点喽，时间分段，到还没滚动的时候时间经过了0%所以left也就为0，当开始滚动时间停止的时候那么就等于全部完成也就是100%，这句话写不对效果就不出哦*/
        @-webkit-keyframes move {
                0% {
                    left: 0;
                }
                100% {
                    left: -400px;
                }
            }
       
/*以下是布局样式*/  
        #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;
/*这句话也是至关重要的，少了这句话也不会滚动，我给他四个值，3s代表三秒之内完成滚动，move这个名字对应着上面时间分段的名字，infinite代表循环滚动，linear表示匀速滚动*/

            -webkit-animation: 3s move infinite linear;
        }
        #ul li{
            float: left;
            background: black;
            color: white;
            margin-left: 1px;
            width: 100px;
            height: 100px;    
            text-align: center;
            line-height: 100px;
        }
        
        
        /*这句话代表鼠标移动上去滚动会停止，类似于轮播*/
        #div:hover #ul {
        -webkit-animation-play-state: paused;
            }
        
    </style>

 

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

posted @ 2016-08-02 20:50  阿雨啊  阅读(1090)  评论(2)  编辑  收藏  举报