css3 无限滚动条 |css隐藏显示列表

/* 定义滚动条样式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/* 定义滑块样式 */
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #ccc;
}
/* 定义滑轨样式 */
::-webkit-scrollbar-track {
border-radius: 3px;
background-color: #eee;
}
/* 定义动画 */
@-webkit-keyframes scroll {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}
/* 添加动画 */
.scrollbar {
overflow-y: auto;
-webkit-animation: scroll 10s linear infinite;
}

上面的代码中，大家首先定义了滚动条的样式，包括滚动条的宽度、高度、滑块的样式以及滑轨的样式。然后定义了一个名为scroll的动画，它的作用是把页面元素按照Y轴的方向向上滚动。最后，大家把动画添加到了class名为scrollbar的元素中，设置了动画的持续时间、动画的播放方式以及动画是否无限循环。

总之，CSS3 无限滚动条是一项非常实用的技术，可以让网页在视觉上更加丰富和动态。需要注意的是，滚动条滑块的移动速度和滑动方向可以通过调整动画代码中的相关参数来控制，以达到最适合自己的效果。