本篇文章给大家分享的是有关CSS3中怎么实现滚动条动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
<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;
}
@-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;
-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中怎么实现滚动条动画效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注天达云行业资讯频道。