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 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 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 面向对象 final类与final方法
2010/05/05 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
php中的登陆login实例代码
2016/06/20 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python实现控制台进度条功能
2016/01/04 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
期末自我鉴定
2014/01/23 职场文书
小小的船教学反思
2014/02/21 职场文书
大学新闻系求职信
2014/06/03 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
pytorch实现手写数字图片识别
2021/05/20 Python
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
德劲DE1105机评
2022/04/05 无线电