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 相关文章推荐
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 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
PHP获取网卡地址的代码
2008/04/09 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php取得字符串首字母的方法
2015/03/25 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
JavaScript基本对象
2007/01/11 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python单元测试实例详解
2018/05/25 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python的pygame安装教程详解
2020/02/10 Python
python中random模块详解
2021/03/01 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
书法培训心得体会
2014/01/05 职场文书
中学教师培训制度
2014/01/31 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
2014年审计工作总结
2014/11/17 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
python如何读取.mtx文件
2021/04/22 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技