css东西循环往下掉

在CSS中，有一个有趣的效果叫做“东西循环往下掉”，也称为“无限循环滚动”。这种效果可以让你的页面看起来更加动态和生动，是很多网站都喜欢使用的一种效果。

要实现这种效果，需要用到CSS3中的animation属性。首先，定义一个keyframes动画，定义从哪个位置开始循环滚动，以及滚动到哪个位置停止。例如：

@keyframes scroll {
   0% {
     transform: translateY(0);
   }
   100% {
     transform: translateY(-100%);
   }
} 

上面的代码定义了一个名为scroll的动画，在0%时，元素的位移为0，即不动；在100%时，元素的位移为-100%，即往上滚动一个屏幕的高度。

接下来，在需要使用循环滚动效果的元素上，添加animation属性，指定使用刚刚定义的动画，以及持续时间、循环次数等参数。

.scroll {
   animation: scroll 5s linear infinite;
   /* 持续时间为5秒，线性缓动，无限循环 */
} 

最后，给元素添加一些样式，例如指定宽度和高度以及溢出隐藏等，确保效果可以正常显示。

.scroll-container {
   width: 100%;
   height: 100px;
   overflow: hidden;
}
.scroll {
   width: 100%;
   height: 200px;
} 

通过使用上述代码，就可以实现一个循环往下掉的效果了。如果需要循环滚动的元素很多，可以通过添加多个类名，将相同的样式应用到多个元素身上。

总之，无限循环滚动是一种非常实用的效果，可以为你的网站增加一些生动和动态的元素，让用户感到更加舒适和愉悦。