答案：通过CSS animation和transform: translateX()实现轮播图平滑切换，HTML结构使用flex布局排列图片，.carousel设置溢出隐藏，.carousel-track用300%宽度容纳三张等宽图片并应用无限循环动画，@keyframes定义分段位移：0%-33.33%显示第一张，37.33%-66.66%左移100%切换第二张，70.66%-100%再移200%展示第三张，每张停留约3秒，4%时间段完成滑动过渡，配合ease-in-out缓动更自然，:hover可暂停动画，适用于静态自动播放场景。
实现轮播图的平滑切换效果，可以通过 CSS animation 结合 transform: translateX() 来完成，无需 JavaScript 也能实现自动轮播。这种方式性能好、动画流畅，适合静态展示场景。
基本结构：HTML 布局
轮播图通常包含一个外层容器和多个图片项。使用 flex 布局让图片水平排列。
<div class="carousel"><div class="carousel-track">
<img src="image1.jpg" alt="Slide 1" class="slide">
<img src="image2.jpg" alt="Slide 2" class="slide">
<img src="image3.jpg" alt="Slide 3" class="slide">
</div>
</div>
关键样式：CSS 设置
通过设置容器溢出隐藏，内部轨道横向排列并用 translateX 实现位移动画。
.carousel {width: 100%;
overflow: hidden;
height: 400px;
}
.carousel-track {
display: flex;
width: 300%; / 3张图宽度 /
height: 100%;
animation: slide 8s infinite;
}
.slide {
width: 33.333%; / 每张图占三分之一 /
height: 100%;
object-fit: cover;
}
动画定义：使用 @keyframes 控制 translateX
通过改变 transform: translateX() 的值，实现图片的连续滑动切换。
立即学习“前端免费学习笔记（深入）”；
@keyframes slide {0% { transform: translateX(0); }
33.33% { transform: translateX(0); }
37.33% { transform: translateX(-100%); }
66.66% { transform: translateX(-100%); }
70.66% { transform: translateX(-200%); }
100% { transform: translateX(-200%); }
}
说明：每张图停留约 3 秒，然后在 4% 的动画时间内滑动切换（如从 33.33% 到 37.33%）。translateX 负值对应左移一张图的宽度（100%）。
优化建议
- 图片数量变化时，需调整 width 百分比 和 @keyframes 中的时间节点
- 使用 ease-in-out 可让动画更自然：
animation-timing-function: ease-in-out; - 若要支持暂停悬停，可加
:hover控制：.carousel:hover .carousel-track { animation-play-state: paused; } - 移动端适配时注意 touch 事件无法响应，纯 CSS 方案适合只读场景
基本上就这些。利用 translateX 配合关键帧动画，就能做出流畅的自动轮播效果，不复杂但容易忽略时间节点的计算。
