css盒子中的图片横向无限循环滚动的动画效果

CSS可以创建图片在盒子中横向无限循环滚动的动画效果，通常通过结合`display: flex`布局、`animation`属性以及关键帧(`@keyframes`)来实现。以下是基本步骤：

1. 首先，设置容器的样式使其成为Flex布局，并指定主轴方向为水平(`flex-direction: row;`)。

.container {
   display: flex;
   overflow-x: auto; /* 实现自动滚动 */
   scroll-snap-type: x mandatory; /* 确保元素在每个位置停留 */
}

2. 使用`animation`属性创建一个动画，例如，你可以让图片每隔一定时间向左平移一屏宽度：

.item {
   width: fit-content; /* 自适应图片宽度 */
   animation: slide infinite linear;
}

@keyframes slide {
   0% { transform: translateX(0); }
   100% { transform: translateX(-100% * .9); } /* 每次移动90%屏幕宽度，使得图像看似无限滚动 */
}

3. 要停止在最后一张图上循环，可以在最后一个关键帧设置回原点：

@keyframes slide {
   0% { transform: translateX(0); }
   99% { transform: translateX(-100% * .9); }
   100% { transform: translateX(0); /* 回到起点 */ }
}