这里小编不多说什么了，直接上代码！
#outer-container {
width: 100%; /* 设置外部容器宽度 */
overflow: hidden; /* 隐藏溢出部分 */
}
#inner-container {
white-space: nowrap; /* 防止文字换行 */
animation: scrollLeft 10s linear infinite; /* 使用动画让整个容器向左滚动 */
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightblue;
margin: 5px;
}
/* 定义动画 */
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - 10px)); /* 加上一些额外的空白，以便滚动到最后一个元素时不会立即切换 */
}
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
效果展示：
小编已实现的需求效果：