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: 0;
}
100% {
left: -400px;
}
}
/*以下是布局样式*/
#div{
width: 500px;
height: 100px;
margin: 100px auto;
border: 5px solid green;
position: relative;
overflow: hidden;
css始终显示滚动条
}
#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>
以上是实现滚动条的所有代码，觉得赞的⼈可以点击推荐谢谢~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。