编程 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实现一个div设置多张背景图片及background-image属性实例演示

Aug 10 HTML / CSS

css3的transform造成z-index无效解决方案

Dec 04 HTML / CSS

CSS3实现鼠标悬停显示扩展内容

Aug 24 HTML / CSS

使用 css3 实现圆形进度条的示例

Jul 05 HTML / CSS

CSS3 实现时间轴动画

Nov 25 HTML / CSS

HTML5中div、article、section的区别及使用介绍

Aug 14 HTML / CSS

html5小技巧之通过document.head获取head元素

Jun 04 HTML / CSS

HTML5 video标签（播放器）学习笔记（二）:播放控制

Apr 24 HTML / CSS

简单介绍HTML5中audio标签的使用

Sep 24 HTML / CSS

整理HTML5中支持的URL编码与字符编码

Feb 23 HTML / CSS

浅谈html5 video 移动端填坑记

Jan 15 HTML / CSS

几款流行的HTML5 UI框架比较(小结)

Apr 08 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

浅析51个PHP处理字符串的函数

2013/08/02 PHP

ThinkPHP模板引擎之导入资源文件方法详解

2014/06/18 PHP

php修改上传图片尺寸的方法

2015/04/14 PHP

一个PHP实现的轻量级简单爬虫

2015/07/08 PHP

php 运算符与表达式详细介绍

2016/11/30 PHP

PHP htmlentities()函数用法讲解

2019/02/25 PHP

PHP多进程简单实例小结

2019/11/09 PHP

jQuery EasyUI API 中文文档 - Panel面板

2011/09/30 Javascript

javascript计时器事件使用详解

2014/01/07 Javascript

jQuery在iframe中无法弹出对话框的解决方法

2014/01/12 Javascript

JS和函数式语言的三特性

2014/03/05 Javascript

JavaScript跨平台的开源框架NativeScript

2015/03/24 Javascript

ECMAScript中函数function类型

2015/06/03 Javascript

jQuery实现批量判断表单中文本框非空的方法(2种方法)

2015/12/09 Javascript

判断数组是否包含某个元素的js函数实现方法

2016/05/19 Javascript

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

2016/09/02 Javascript

简单的js表格操作

2016/09/24 Javascript

JavaScript中的编码和解码函数

2017/02/15 Javascript

javascript 删除数组元素和清空数组的简单方法

2017/02/24 Javascript

js canvas实现QQ拨打电话特效

2017/05/10 Javascript

JS中把函数作为另一函数的参数传递方法(总结)

2017/06/28 Javascript

关于vue中watch检测到不到对象属性的变化的解决方法

2018/02/08 Javascript

微信小程序带动画弹窗组件使用方法详解

2018/11/27 Javascript

JavaScript实现的联动菜单特效示例

2019/07/08 Javascript

Python中的Matplotlib模块入门教程

2015/04/15 Python

Django实现分页功能

2018/07/02 Python

python对视频画框标记后保存的方法

2018/12/07 Python

Python实现EXCEL表格的排序功能示例

2019/06/25 Python

美的官方商城：Midea

2016/09/14 全球购物

空字符串(“”)和null的区别

2012/11/13 面试题

采购部经理岗位职责

2014/02/10 职场文书

反腐倡廉演讲稿

2014/05/22 职场文书

基层工作经历证明

2015/06/19 职场文书

酒店开业主持词

2015/07/02 职场文书

2019广播稿怎么写

2019/04/17 职场文书

八年级作文之一起的走过日子

2019/09/17 职场文书