编程 HTML / CSS

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

Posted in HTML / CSS onAugust 03, 2016

先给大家一张效果图，看似简单，其实实现起来....那也是非常简单的~简单又实用

黑框里面的字体会自动滚动，形成滚动条，可以用于展示和提示，首先我们先要在body里面写上自己想要的文字，比如我想写：感觉好的请点击推荐

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

CSS Code复制内容到剪贴板

<body>
<div id="div">
<ul id="ul">
<li>感</li>
<li>觉</li>
<li>好</li>
<li>的</li>
<li>请</li>
<li>点</li>
<li>击</li>
<li>推</li>
<li>荐</li>
</ul>
</div>
</body>

接下来我们在在style样式里面调整样式，实现他的滚动

CSS Code复制内容到剪贴板

<style>/*先给个整体去除下划线*/
ul,li,ol{
list-style: none;
}/*这里也就是重点喽，时间分段，到还没滚动的时候时间经过了0%所以left也就为0，当开始滚动时间停止的时候那么就等于全部完成也就是100%，这句话写不对效果就不出哦*/
@-webkit-keyframes move {
0% {
left: 0;
}
100% {
left: -400px;
}
}
/*以下是布局样式*/
#div{
width: 500px;
height: 100px;
margin: 100px auto;
border: 5px solid green;
position: relative;
overflow: hidden;
}
#ul{
position: absolute;
padding: 0;
margin-top: 0px;
width: 185%;
display: block;/*这句话也是至关重要的，少了这句话也不会滚动，我给他四个值，3s代表三秒之内完成滚动，move这个名字对应着上面时间分段的名字，infinite代表循环滚动，linear表示匀速滚动*/
-webkit-animation: 3s move infinite linear;
}
#ul li{
float: left;
background: black;
color: white;
margin-left: 1px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/*这句话代表鼠标移动上去滚动会停止，类似于轮播*/
#div:hover #ul {
-webkit-animation-play-state: paused;
}
</style>

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

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

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

HTML / CSS 相关文章推荐

各大浏览器 CSS3 和 HTML5 兼容速查表图文

Apr 01 HTML / CSS

老生常谈CSS中的长度单位

Jun 27 HTML / CSS

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

Aug 24 HTML / CSS

CSS3 真的会替代 SCSS 吗

Mar 09 HTML / CSS

如何使用html5与css3完成google涂鸦动画

Dec 16 HTML / CSS

很酷的HTML5电子书翻页动画特效

Feb 25 HTML / CSS

HTML5 localStorage使用总结

Feb 22 HTML / CSS

html5使用canvas实现弹幕功能示例

Sep 11 HTML / CSS

手把手教你实现一个canvas智绘画板的方法

Mar 04 HTML / CSS

html5启动原生APP总结

Jul 03 HTML / CSS

boostrap modal 闪现问题的解决方法

Sep 01 HTML / CSS

萌新的HTML5 入门指南

Nov 06 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

mysql 查询指定日期时间内sql语句实现原理与代码

2012/12/16 PHP

smarty模板中使用get、post、request、cookies、session变量的方法

2014/04/24 PHP

巧妙破除网页右键禁用的十大绝招

2006/08/12 Javascript

简单JS代码压缩器

2006/10/12 Javascript

尽可能写"友好"的"Javascript"代码

2007/01/09 Javascript

js中更短的 Array 类型转换

2011/10/30 Javascript

javascript跨域的4种方法和原理详解

2014/04/08 Javascript

javascript setinterval 的正确语法如何书写

2014/06/17 Javascript

禁止iframe页面的所有js脚本如alert及弹出窗口等

2014/09/03 Javascript

使用jquery提交form表单并自定义action的实现代码

2016/05/25 Javascript

vue2.0使用Sortable.js实现的拖拽功能示例

2017/02/21 Javascript

JavaScript 实现 Tab 点击切换实例代码

2017/03/25 Javascript

详解express与koa中间件模式对比

2017/08/07 Javascript

JS图片懒加载的优点及实现原理

2020/01/10 Javascript

js面向对象封装级联下拉菜单列表的实现步骤

2021/02/08 Javascript

[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

python 图片验证码代码分享

2012/07/04 Python

python进程管理工具supervisor使用实例

2014/09/17 Python

python实现自动重启本程序的方法

2015/07/09 Python

Python通过命令开启http.server服务器的方法

2017/11/04 Python

Python基于socket实现简单的即时通讯功能示例

2018/01/16 Python

Python实现自定义顺序、排列写入数据到Excel的方法

2018/04/23 Python

详解pyqt5 动画在QThread线程中无法运行问题

2018/05/05 Python

Python实现base64编码的图片保存到本地功能示例

2018/06/22 Python

一篇文章搞定Python操作文件与目录

2019/08/13 Python

Python+OpenCv制作证件图片生成器的操作方法

2019/08/21 Python

python实现可下载音乐的音乐播放器

2020/02/25 Python

总结Pyinstaller的坑及终极解决方法(小结)

2020/09/21 Python

详解python3 GUI刷屏器(附源码)

2021/02/18 Python

高中生家长寄语大全

2014/04/03 职场文书

经典演讲稿开场白

2014/08/25 职场文书

党员四风剖析材料

2014/08/27 职场文书

基层党员群众路线教育实践活动个人对照检查材料思想汇报

2014/10/05 职场文书

工艺技术员岗位职责

2015/02/04 职场文书

2015教师个人工作总结范文

2015/03/31 职场文书

幼儿园教师心得体会范文

2016/01/21 职场文书