css3 无限循环滚动条 |css公告滚动代码

.scroll {
height: 100px;
overflow: hidden;
}
.scroll ul {
padding: 0;
margin: 0;
list-style: none;
height: 100%;
width: 200%;
animation: vertical 5s linear infinite;
}
.scroll ul li {
float: left;
width: 50%;
height: 100%;
}
@keyframes vertical {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -100%, 0);
}
}

以上代码可以让大家实现一个无限循环的垂直方向滚动条，首先大家定义了一个高度为100px的包含块，采用了隐藏溢出的方式来实现滚动；然后大家采用了一个ul标签来挂载所有的滚动内容块，由于大家采用了循环滚动，因此大家将所有内容块分成了两个部分，并且采用定位的方式来确保内容块能够铺满整个滚动区域；最后大家定义了一个动画函数vertical，它能够让所有内容块在垂直方向上无限循环滚动。

总的来说，CSS3的无限循环滚动条需要结合动画函数来实现，虽然手写代码量相对较多，但其巨大的灵活性和优美的效果成果是值得大家掌握的。