css球循环滚动代码 |css上下翻页按钮

.ball {
width: 50px; 
height: 50px; 
border-radius: 50%; 
background: red;
position: absolute; 
left: -50px; 
animation: roll 5s linear infinite;
}
@keyframes roll {
from {
transform: translateX(0);
}
to {
transform: translateX(100vw);
}
}
.container {
width: 100%;
overflow: hidden;
position: relative;
}

以上代码通过关键帧动画（@keyframes）实现了球的滚动效果，动画名称为roll，滚动的时间为5秒，滚动的速度为线性（linear），滚动的距离为整个页面宽度（100vw）。具体实现时，需要给球（.ball）添加绝对定位和左偏移，再将球的左偏移通过动画滚动来改变。为了实现循环滚动效果，需要将球放置在一个具有固定宽度和溢出隐藏的容器中（.container）。

总的来说，通过这段代码实现球的循环滚动效果非常简单，适合各类网页特效的实现。对网页设计者来说，掌握CSS的动画实现技巧，可以大大提高网页的视觉效果和用户体验。