编程 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弹性盒模型（Flexbox）详细介绍

Oct 08 HTML / CSS

CSS3 display知识详解

Nov 25 HTML / CSS

CSS3 @keyframes简单动画实现

Feb 24 HTML / CSS

CSS3实现div从下往上滑入滑出效果示例

Apr 28 HTML / CSS

移动web模拟客户端实现多方框输入密码效果【附代码】

Mar 25 HTML / CSS

HTML5的结构和语义(1):前言

Oct 17 HTML / CSS

HTML5所有标签汇总及标签意义解释

Mar 12 HTML / CSS

用HTML5中的Canvas结合公式绘制粒子运动的教程

May 08 HTML / CSS

详解HTML5之pushstate、popstate操作history,无刷新改变当前url

Mar 15 HTML / CSS

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

Jul 01 HTML / CSS

html输入两个数实现加减乘除功能

Jul 01 HTML / CSS

CSS实现单选折叠菜单功能

Nov 01 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 字符串小常识

2009/06/05 PHP

PHP iconv 解决utf-8和gb2312编码转换问题

2010/04/12 PHP

PHP字符串比较函数strcmp()和strcasecmp()使用总结

2014/11/19 PHP

微信利用PHP创建自定义菜单的方法

2016/08/01 PHP

PHP 无限级分类

2017/05/04 PHP

javascript中的float运算精度实例分析

2010/08/21 Javascript

JQuery异步加载无限下拉框级联功能实现示例

2014/02/19 Javascript

IE中getElementsByName()对有些元素无效的解决方案

2014/09/28 Javascript

基于insertBefore制作简单的循环插空效果

2015/09/21 Javascript

js格式化时间的方法

2015/12/18 Javascript

jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

2016/07/07 Javascript

微信开发消息推送实现代码

2016/10/21 Javascript

实例详解display:none与visible:hidden的区别

2017/03/30 Javascript

JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容

2017/06/12 Javascript

详解使用webpack打包编写一个vue-toast插件

2017/11/08 Javascript

webpack开发环境和生产环境的深入理解

2018/11/08 Javascript

vue 集成jTopo 处理方法

2019/08/07 Javascript

js实现无限瀑布流实例方法

2019/09/16 Javascript

详解一些适用于Node.js的命名约定

2019/12/08 Javascript

js通过canvas生成图片缩略图

2020/10/02 Javascript

在Python的Django框架中使用通用视图的方法

2015/07/21 Python

jupyter notebook oepncv 显示一张图像的实现

2020/04/24 Python

pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)

2020/12/16 Python

matplotlib事件处理基础(事件绑定、事件属性)

2021/02/03 Python

使用Html5、CSS实现文字阴影效果

2018/01/17 HTML / CSS

非洲NO.1网上商店：Jumia肯尼亚

2016/08/18 全球购物

美国性感内衣店：Yandy

2018/06/12 全球购物

经典商业广告词

2014/03/13 职场文书

五一劳动节活动记录

2014/03/23 职场文书

优质服务活动实施方案

2014/05/02 职场文书

媒矿安全生产承诺书

2014/05/23 职场文书

捐款活动总结

2014/08/27 职场文书

无财产离婚协议书范本

2014/10/28 职场文书

2015年母亲节活动总结

2015/02/10 职场文书

职工培训工作总结

2015/08/10 职场文书

Android开发手册TextInputLayout样式使用示例

2022/06/10 Java/Android