CSS3如何实现滚动条动画效果代码分享

麻雀的确可爱，它的脑袋很小，只有栗子那么大，眼晴虽小却非常有神，它的身体小巧成蛋状流线型，放在手上只占手掌的一半。它浑身长着灰褐色羽毛，和树皮色相似，是一种保护色，它颈部和腹部的毛发白，显得很匀称，它的尾巴像半张开的小扇子。它飞得很快，也很有趣，那么一窜窜的。

先给大家一张效果图，看似简单，其实实现起来....那也是非常简单的~简单又实用

黑框里面的字体会自动滚动，形成滚动条，可以用于展示和提示，首先我们先要在body里面写上自己想要的文字，比如我想写：感觉好的请点击推荐

CSS Code复制内容到剪贴板

接下来我们在在style样式里面调整样式，实现他的滚动

CSS Code复制内容到剪贴板

<style>　　/*先给个整体去除下划线*/
ul,li,ol{
list-style:none;
}　　/*这里也就是重点喽，时间分段，到还没滚动的时候时间经过了0%所以left也就为0，当开始滚动时间停止的时候那么就等于全部完成也就是100%，这句话写不对效果就不出哦*/
@-webkit-keyframesmove{
0%{
left:0;
}
100%{
left:-400px;
}
}
/*以下是布局样式*/
#div{
width:500px;
height:100px;
margin:100pxauto;
border:5pxsolidgreen;
position:relative;
overflow:hidden;
}
#ul{
position:absolute;
padding:0;
margin-top:0px;
width:185%;
display:block;/*这句话也是至关重要的，少了这句话也不会滚动，我给他四个值，3s代表三秒之内完成滚动，move这个名字对应着上面时间分段的名字，infinite代表循环滚动，linear表示匀速滚动*/
-webkit-animation:3smoveinfinitelinear;
}
#ulli{
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如何实现滚动条动画效果代码分享。人只要不失去方向，就不会失去自己。更多关于CSS3如何实现滚动条动画效果代码分享请关注haodaima.com其它相关文章！

全站频道