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


Posted in HTML / CSS onAugust 03, 2016

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

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

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-stylenone;   
  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.             width500px;   
  16.             height100px;   
  17.             margin100px auto;   
  18.             border5px solid green;   
  19.             positionrelative;       
  20.             overflowhidden;       
  21.         }   
  22.         #ul{   
  23.             positionabsolute;           
  24.             padding: 0;   
  25.             margin-top0px;       
  26.             width: 185%;   
  27.             displayblock;/*这句话也是至关重要的,少了这句话也不会滚动,我给他四个值,3s代表三秒之内完成滚动,move这个名字对应着上面时间分段的名字,infinite代表循环滚动,linear表示匀速滚动*/  
  28.             -webkit-animation: 3s move infinite linear;   
  29.         }   
  30.         #ul li{   
  31.             floatleft;   
  32.             backgroundblack;   
  33.             colorwhite;   
  34.             margin-left1px;   
  35.             width100px;   
  36.             height100px;       
  37.             text-aligncenter;   
  38.             line-height100px;   
  39.         }   
  40.         /*这句话代表鼠标移动上去滚动会停止,类似于轮播*/  
  41.         #div:hover #ul {   
  42.         -webkit-animation-play-state: paused;   
  43.             }   
  44.     </style>   

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

HTML / CSS 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
关于box-sizing的全面理解
Jul 28 #HTML / CSS
css3动画效果小结(推荐)
Jul 25 #HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 #HTML / CSS
浅谈css3中的前缀
Jul 20 #HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 #HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 #HTML / CSS
CSS3实现时间轴效果
Jul 11 #HTML / CSS
You might like
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
python分布式计算dispy的使用详解
2019/12/22 Python
tensorflow自定义激活函数实例
2020/02/04 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
工程总经理工作职责
2013/12/09 职场文书
大课间体育活动方案
2014/03/12 职场文书
青年文明号口号
2014/06/17 职场文书
财产分割协议书范本
2014/11/03 职场文书
大学生毕业评语
2014/12/31 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
给领导敬酒词
2015/08/12 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
Redis 限流器
2022/05/15 Redis