一团网资讯
一团资讯 > css3 > CSS3实现滚动条动画效果代码分享
CSS3实现滚动条动画效果代码分享
-05-01 08:57:16 发布者：来源网络
先给大家一张效果图，看似简单，其实实现起来....那也是非常简单的~简单又实用
黑框里面的字体会自动滚动，形成滚动条，可以用于展示和提示，首先我们先要在body里面写上自己想要的文字，比如我想写：感觉好的请点击推荐
CSS Code复制内容到剪贴板
感觉好的请点击推荐
接下来我们在在style样式里面调整样式，实现他的滚动
CSS Code复制内容到剪贴板
ul,li,ol{
list-style:none;
}
@-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;
-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;
}
[ 责任编辑：来源网络 ]
