css来回交替无缝滚动

### 使用 CSS 实现元素来回交替无缝滚动动画

#### 创建关键帧动画
为了实现元素来回交替无缝滚动的效果，可以利用 `@keyframes` 定义动画的关键帧。通过设置不同的百分比来控制动画过程中元素的位置变化。

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(calc(-1 * (100% + 20px))); /* 假设两个元素间有20px间距 */
    }
    100% {
        transform: translateX(0);
    }
}

此段代码定义了一个名为 `slide` 的动画，在起始位置 (`0%`) 和结束位置 (`100%`) 上，元素位于原始位置；而在中间阶段 (`50%`) ，元素移动到左侧，使得下一个元素能够显示出来[^1]。

#### 设置容器样式
为了让多个子项能够在有限的空间内循环展示，需要设定父级容器的溢出属性以及隐藏超出部分的内容：

.container {
    width: 300px; /* 可根据实际需求调整宽度 */
    overflow: hidden;
    white-space: nowrap;
}

这里设置了 `.container` 类作为外部包裹层，并规定其内部不允许换行(`white-space:nowrap`)，从而让所有子元素排列成一行。

#### 配置子项目布局
接着配置每一个要参与轮播的子项目的样式，使其并列排布且具有相同的尺寸：

.item {
    display: inline-block;
    min-width: 100%;
    height: 200px; /* 自定义高度 */
    background-color: lightblue; /* 示例背景颜色 */
}

上述代码片段中的`.item`类用于表示单个滑动条目，将其设置为`inline-block`形式以便水平放置，并给予固定的最小宽度等于父容器宽度，确保每次只可见一个完整的项目。

#### 应用动画效果
最后一步是在目标对象上应用之前定义好的动画规则，同时指定无限次重复播放以达到连续回滚的目的:

.slider {
    animation-name: slide;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

这段声明指定了具体的动画名称、持续时间、速度曲线和平滑度参数。特别注意的是选择了线性的加减速模式(`linear`)和无尽次数的迭代(`infinite`)。

综上所述，完整HTML结构如下所示：

<div class="container">
    <div class="slider item">Item 1</div>
    <div class="item">Item 2</div>
</div>

以上就是使用纯CSS完成的一个简易版自动切换幻灯片实例。当然还可以在此基础上加入更多自定义选项比如暂停/恢复按钮等功能增强用户体验。