CSS3实现滚动条动画效果代码分享

2020-04-30 14:34:32易采站长站整理

先给大家一张效果图,看似简单,其实实现起来….那也是非常简单的~简单又实用
 
黑框里面的字体会自动滚动,形成滚动条,可以用于展示和提示,首先我们先要在body里面写上自己想要的文字,比如我想写:感觉好的请点击推荐

CSS Code复制内容到剪贴板

<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样式里面调整样式,实现他的滚动

CSS Code复制内容到剪贴板

<style>  /*先给个整体去除下划线*/  
        ul,li,ol{   
            list-style: none;   
        }  /*这里也就是重点喽,时间分段,到还没滚动的时候时间经过了0%所以left也就为0,当开始滚动时间停止的时候那么就等于全部完成也就是100%,这句话写不对效果就不出哦*/  
        @-webkit-keyframes move {   
                0% {   
                    left: 0;   
                }