css实现来回滚动 |css3 html5 卡片特效

.container {
overflow: hidden;
position: relative;
height: 100px;
width: 200px;
}
.content {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
animation: scroll 5s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

从上面的代码可以看出，大家在.container元素中定义了overflow为hidden，以便将内容限制在容器内部，并通过height和width属性来控制容器的大小。同时，大家还将.content元素的position属性设为absolute，将其定位到了容器的左上角。

接下来，大家使用animation属性指示了一个名为scroll的动画效果，这个动画会在5秒内无限循环播放。在@keyframes中，大家定义了scroll动画的两个关键帧：0%和100%。当动画播放到0%时，content元素的transform属性被设置为translateX(0)，也就是不进行位移；当动画播放到100%时，content元素的transform属性被设置为translateX(-100%)，使内容向左移动，直到完全滚出容器。

结合这些CSS属性，大家就可以实现一个简单的来回滚动效果。如果需要控制滚动速度或者滚动方向，大家可以调整animation和transform属性的值，以适应不同的需求。