css3实现动画滚动条
2024-08-23 21:15:12
先给大家一张效果图,看似简单,其实实现起来....那也是非常简单的~简单又实用
黑框里面的字体会自动滚动,形成滚动条,可以用于展示和提示,首先我们先要在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>
以上是实现滚动条的所有代码,觉得赞的人可以点击推荐谢谢~
最新文章
- centos7 apache httpd安装和配置django项目
- 【转】微信公众账号 Senparc.Weixin.MP SDK 开发教程 索引
- SqlServer定时备份数据库和定时杀死数据库死锁解决
- [CF 474E] Pillars (线段树+dp)
- mac ide
- linux下启动oracle服务命令
- bootstrap首页制作
- phpEXCEL操作全解
- quartz搭建与应用
- php内存分析
- CxSkinButton按钮皮肤类
- Python 开发与接口测试学习笔记
- 终于,我也要出一本C#的书了 - 我的写作历程与C#书单推荐
- [BZOJ1007] [HNOI2008] 水平可见直线 (凸包)
- Oracle SQL Developer 免费的DB2客户端
- bzoj2839 集合计数(容斥)
- 使用线程统计信息(Thread Statistics)
- 使用浏览器自定义协议启动本地程序(.EXE文件)
- vue-awesome-swiper 水平滚动异常
- WebService与CXF