首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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-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实现动画滚动条代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 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
监听(2) 无限迭代(1) re模块(2) 分词器(1) okenizer(1) 事件调度器(1) scss(1) watch(1) sched(1) while(1)
You might like
php制作的简单验证码识别代码
2016/01/26 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
动手学习无线电
2021/03/10 无线电
prototype.js的Ajax对象
2006/09/23 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python实现通讯录功能
2018/02/22 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python url 参数修改方法
2018/12/26 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python函数参数分类原理详解
2020/05/28 Python
Python必须了解的35个关键词
2020/07/16 Python
LUISAVIAROMA中国官网：时尚奢侈品牌购物网站
2020/11/01 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
办公室文员工作自我评价
2013/12/01 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
玲玲的画教学反思
2014/02/04 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
求职自我评价范文100字
2014/09/23 职场文书
药店营业员岗位职责
2015/04/14 职场文书
班级班风口号大全
2015/12/25 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
JavaScript 定时器详情
2021/11/11 Javascript
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技