编程 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选择器的研究(详解)

Sep 16 HTML / CSS

CSS3让登陆面板3D旋转起来

May 03 HTML / CSS

详解CSS3中的box-sizing（content-box与border-box）

Apr 19 HTML / CSS

CSS3 input框的实现代码类似Google登录的动画效果

Aug 04 HTML / CSS

html5声频audio和视频video等新特性详细说明

Dec 26 HTML / CSS

HTML5制作酷炫音频播放器插件图文教程

Dec 30 HTML / CSS

canvas 阴影和图形变换的示例代码

Jan 02 HTML / CSS

HTML5仿微信聊天界面、微信朋友圈实例代码

Jan 29 HTML / CSS

基于 HTML5 WebGL 实现的医疗物流系统

Oct 08 HTML / CSS

HTML里显示pdf、word、xls、ppt的方法示例

Apr 14 HTML / CSS

html5视频自动横过来自适应页面且点击播放功能的实现

Jun 03 HTML / CSS

Amaze UI 文件选择域的示例代码

Aug 26 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 ci框架验证码实例分析

2013/06/26 PHP

开源php中文分词系统SCWS安装和使用实例

2014/04/11 PHP

php生成图片缩略图的方法

2015/04/07 PHP

PHP中的流(streams)浅析

2015/07/02 PHP

非常经典的PHP文件上传类分享

2016/05/15 PHP

php+jquery+html实现点击不刷新加载更多的实例代码

2016/08/12 PHP

JS获取IUSR_机器名和IWAM_机器名帐号的密码

2006/12/06 Javascript

用js实现的抽象CSS圆角效果!!

2007/05/03 Javascript

UpdatePanel和Jquery冲突的解决方法

2013/04/01 Javascript

可以用鼠标拖动的DIV实现思路及代码

2013/10/21 Javascript

JavaScript实现在数组中查找不同顺序排列的字符串

2014/09/26 Javascript

JavaScript 实现打印,打印预览,打印设置

2014/12/30 Javascript

javascript表格的渲染组件

2015/07/03 Javascript

JavaScript基于ajax编辑信息用法实例

2015/07/15 Javascript

JS实现灵巧的下拉导航效果代码

2015/08/25 Javascript

Jquery1.9.1源码分析系列（六）延时对象应用之jQuery.ready

2015/11/24 Javascript

Bootstrap输入框组件简单实现代码

2017/03/06 Javascript

JS实现新建文件夹功能

2017/06/17 Javascript

基于jQuery实现无缝轮播与左右点击效果

2018/05/13 jQuery

JS sort排序详细使用方法示例解析

2020/09/27 Javascript

three.js中多线程的使用及性能测试详解

2021/01/07 Javascript

[01:03:59]2018DOTA2亚洲邀请赛3月30日小组赛B组VGJ.T VS Secret

2018/03/31 DOTA

[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场

2018/04/06 DOTA

python字符串替换的2种方法

2014/11/30 Python

基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解

2017/10/13 Python

python调用xlsxwriter创建xlsx的方法

2018/05/03 Python

python实现转盘效果 python实现轮盘抽奖游戏

2019/01/22 Python

pyqt5实现按钮添加背景图片以及背景图片的切换方法

2019/06/13 Python

Python如何实现强制数据类型转换

2019/11/22 Python

Django中使用MySQL5.5的教程

2019/12/18 Python

使用python实现CGI环境搭建过程解析

2020/04/28 Python

墨西哥网上购物：Linio墨西哥

2016/10/20 全球购物

法国最大电子商务平台：Cdiscount

2018/03/13 全球购物

印度尼西亚值得信赖的第一家网店：Bhinneka

2018/07/16 全球购物

小学生志愿者活动方案

2014/08/23 职场文书

Windows安装Anaconda3的方法及使用过程详解

2021/06/11 Python