首页
所有分类
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 相关文章推荐
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 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
Athens(1) compose(3) iPhone(1) moviepy(1) iOS16(1) DNA(2) iOS(1) iOS15(1) opencv(7) 模糊匹配(1)
You might like
php环境无法上传文件的解决方法
2014/04/30 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
java必学必会之static关键字
2015/12/03 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
如何实现星星评价（jquery.raty.js插件）
2016/12/21 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
微信小程序日历组件使用方法详解
2018/12/29 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python单例模式实例详解
2017/03/01 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
Farnell德国：电子元器件供应商
2018/07/10 全球购物
欧克利英国官网：Oakley英国
2019/08/24 全球购物
奥巴马开学演讲稿
2014/05/15 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers