脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

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

  发布时间：2016-08-03 09:32:21   作者：佚名   我要评论
本文给大家介绍CSS3实现动画滚动条代码分享的全部内容，代码简单易懂，功能非常的实用，下面小编给大家分享下

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

CSS Code复制内容到剪贴板
  1. <body>   
  2.         <div id="div">   
  3.         <ul id="ul">   
  4.             <li>感</li>   
  5.             <li>觉</li>   
  6.             <li>好</li>   
  7.             <li>的</li>   
  8.             <li>请</li>   
  9.             <li>点</li>   
  10.             <li>击</li>   
  11.             <li>推</li>   
  12.             <li>荐</li>   
  13.         </ul>   
  14.         </div>   
  15.     </body>   

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

CSS Code复制内容到剪贴板
  1. <style>　　/*先给个整体去除下划线*/  
  2.         ul,li,ol{   
  3.             list-style: none;   
  4.         }　　/*这里也就是重点喽，时间分段，到还没滚动的时候时间经过了0%所以left也就为0，当开始滚动时间停止的时候那么就等于全部完成也就是100%，这句话写不对效果就不出哦*/  
  5.         @-webkit-keyframes move {   
  6.                 0% {   
  7.                     left: 0;   
  8.                 }   
  9.                 100% {   
  10.                     left: -400px;   
  11.                 }   
  12.             }   
  13.        /*以下是布局样式*/     
  14.         #div{   
  15.             width: 500px;   
  16.             height: 100px;   
  17.             margin: 100px auto;   
  18.             border: 5px solid green;   
  19.             position: relative;       
  20.             overflow: hidden;       
  21.         }   
  22.         #ul{   
  23.             position: absolute;           
  24.             padding: 0;   
  25.             margin-top: 0px;       
  26.             width: 185%;   
  27.             display: block;/*这句话也是至关重要的，少了这句话也不会滚动，我给他四个值，3s代表三秒之内完成滚动，move这个名字对应着上面时间分段的名字，infinite代表循环滚动，linear表示匀速滚动*/  
  28.             -webkit-animation: 3s move infinite linear;   
  29.         }   
  30.         #ul li{   
  31.             float: left;   
  32.             background: black;   
  33.             color: white;   
  34.             margin-left: 1px;   
  35.             width: 100px;   
  36.             height: 100px;       
  37.             text-align: center;   
  38.             line-height: 100px;   
  39.         }   
  40.         /*这句话代表鼠标移动上去滚动会停止，类似于轮播*/  
  41.         #div:hover #ul {   
  42.         -webkit-animation-play-state: paused;   
  43.             }   
  44.     </style>   

以上所述是小编给大家介绍的CSS3实现动画滚动条代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

相关文章

  • CSS的ul和li实现横向排列和去掉li的点

    怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需
    2013-10-23

  • CSS3实现鼠标中轮滚动树生长过程特效源码

    CSS3实现鼠标中轮滚动树生长的过程特效源码是一款基于jQuery+CSS3+HTML5实现的鼠标滚动视差效果。需要的朋友不妨前来下载源码
    2016-05-12

  • CSS视差滚动效果

    这篇文章主要介绍了CSS视差滚动效果的相关资料,需要的朋友可以参考下
    2016-01-28

  • CSS怎么隐藏滚动条(三种方法)

    这篇文章主要通过三种方法给大家分享css隐藏滚动条的方法，在此我比较推荐第二种方法，当然也根据实际情况。对本文感兴趣的朋友一起学习吧
    2015-11-18

  • 纯css3实现的圆球顺时针滚动效果源码

    这是一款基于纯css3实现的圆球顺时针滚动效果源码，由于采用纯css3实现动画效果,占用内存极低，且使用方便。直接复制相关html以及css到你的页面中即可。动画呈顺时针方向加
    2015-11-02

  • 使用CSS3来实现滚动视差效果的教程

    这篇文章主要介绍了使用CSS3来实现滚动视差效果的教程,主要使用到了background-attachment属性,需要的朋友可以参考下
    2015-08-24

  • css实现图片横向排列滚动效果

    这篇文章主要介绍了css实现图片横向排列滚动效果,需要的朋友可以参考下
    2017-12-07

最新评论

关注微信公众号

扫一扫