css3实现动画滚动条
先给大家一张效果图，看似简单，其实实现起来....那也是非常简单的~简单又实用
黑框里面的字体会自动滚动，形成滚动条，可以用于展示和提示，首先我们先要在body里面写上自己想要的文字，比如我想写：感觉好的请点击推荐
<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样式里面调整样式，实现他的滚动
<style>
/*先给个整体去除下划线*/
ul,li,ol{
list-style: none;
}
/*这里也就是重点喽，时间分段，到还没滚动的时候时间经过了0%所以left也就为0，当开始滚动时间停止的时候那么就等于全部完成也就是100%，这句话写不对效果就不出哦*/
@-webkit-keyframes move {
0% {
left:;
}
100% {
left: -400px;
}
}
/*以下是布局样式*/
#div{
width: 500px;
height: 100px;
margin: 100px auto;
border: 5px solid green;
position: relative;
overflow: hidden;
}
#ul{
position: absolute;
padding:;
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 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
随机推荐
- Python Shell 中敲击方向键显示「^[[C^[[D」，原因是什么？如何修复？
[root@hk45-node02-47 ahao.mah]# yum -y install readline-devel
- 04-Linux系统编程-第01天（文件IO、阻塞非阻塞）
03-系统函数 系统编程章节大纲 1 文件I/O 2 文件系统 3 进程 4 进程间通信 5 信号 6 进程间关系 7 守护进程 8 线程 9 线程同步 10 网络基础 11 socket编程 12 ...
- PY简易爬虫
然而,实用性很差,仅仅是能用而已. 已知bug: 由于土啬的问题,经常会炸掉.网络不稳定导致各种Connection Aborted/SSLError: EOF occurred in violati ...
- [tyvj1957 Poetize5] Vani和Cl2捉迷藏 (最小路径可重点覆盖+二分图最大匹配)
传送门 Description 这片树林里有N座房子,M条有向道路,组成了一张有向无环图. 树林里的树非常茂密,足以遮挡视线,但是沿着道路望去,却是视野开阔.如果从房子A沿着路走下去能够到达B,那么在 ...
- Java使用JAVE获取MP4播放时长
- python中经常使用的字典内建函数
1.len(mapping) 返回映射的长度(键-值对的个数) 2.hash(obj) 返回obj的哈希值 >>> myDict = {'na ...
- JS垃圾回收——和其他语言一样，JavaScript 的 GC 策略也无法避免一个问题：GC 时，停止响应其他操作，这是为了安全考虑
JavaScript 内存管理 & 垃圾回收机制 标记清除 js 中最常用的垃圾回收方式就是标记清除.当变量进入环境时,例如,在函数中声明一个变量,就将这个而变量标记为“进入环境”.从逻辑上讲 ...
- 网络：万维网（WWW）
ylbtech-网络:万维网(WWW) www (万维网缩写)同义词 万维网一般指www(万维网缩写)WWW是环球信息网的缩写,(亦作“Web”.“WWW”.“'W3'”,英文全称为“World Wi ...
- 09.ws复杂数据类型数据传输
和ajax的共同点是都是自己组装消息自己解析消息.这种方式的好处是一点都不用生成客户端代码.这两种方式(ajax和HttpUrlConnection)的好处是一点都不用生成客户端代码. WSDL这个文 ...
- php模版静态化技术
PHP页面的静态化很有必要,尤其是在CMS系统中,一些内容一旦生成,基本上不会有变化,这时如果用html将页面静态化,无疑会减少服务其解析PHP页面的负担.以下是看书学来的PHP静态化技术,记录之以备 ...