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

程序员文章站 2023-01-06 10:31:24

本文给大家介绍CSS3实现动画滚动条代码分享的全部内容，代码简单易懂，功能非常的实用，下面小编给大家分享下... 16-08-03...

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

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

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

css code复制内容到剪贴板

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

css code复制内容到剪贴板

<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;
}
#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>

以上所述是小编给大家介绍的css3实现动画滚动条代码分享，希望对大家有所帮助

Android GridView实现动画效果实现代码