答案：通过CSS的animation和transform: translateX()实现无限轮播图，利用复制首张图片并配合关键帧动画使轮播在末尾无缝回到起点。外层容器overflow: hidden隐藏溢出，内层flex布局横向排列图片，通过@keyframes定义分段位移动画，每阶段移动-100%宽度，最终视觉上形成循环；结合ease-in-out缓动、图片尺寸统一、hover暂停及will-change提升性能，实现流畅无缝轮播效果。
使用CSS的animation和transform: translateX()可以实现一个无需JavaScript的无限轮播图。核心思路是通过平移图片容器，并利用关键帧动画让其循环滑动，视觉上形成无缝滚动。
基本HTML结构
轮播图通常由一个外层容器和多个并列的图片项组成。为了实现无缝循环，一般在末尾复制第一张图，或在开头复制最后一张，这里采用前者更常见：
<div class="carousel-container"><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">
<img src="image1.jpg" alt="Slide 1 copy" class="slide"> // 复制第一张
</div>
</div>
CSS关键样式设置
外层容器负责隐藏溢出内容，内层轨道横向排列图片，并通过translateX进行整体移动：
width: 100%;
overflow: hidden;
}
.carousel-track {
display: flex;
width: 400%; // 假设4张图
animation: slide 8s infinite; // 每8秒循环一次
}
.slide {
width: 25%; // 每张占1/4
flex-shrink: 0;
}
定义动画关键帧
动画从起始位置（0%）向左移动到负的单张图宽度（-100%），实现三张图的切换。由于最后一张是复制的第一张，在视觉上就“回到”了起点：
立即学习“前端免费学习笔记（深入）”；
@keyframes slide {
0% {
transform: translateX(0);
}
33.33% {
transform: translateX(-100%);
}
66.66% {
transform: translateX(-200%);
}
100% {
transform: translateX(-300%); // 移动到复制图位置
}
}
这样在动画结束时，实际显示的是复制的第一张图，紧接着下一轮动画又从translateX(0)开始，由于视觉一致，用户感知不到跳转。
优化与注意事项
为了让过渡更自然，可添加缓动效果，并避免布局抖动：
- 使用
ease-in-out或cubic-bezier调整动画速度曲线 - 确保所有图片尺寸一致，防止高度跳动
- 若需暂停动画悬停，可用
:hover控制animation-play-state: paused - 移动端考虑加入
will-change: transform提升性能
基本上就这些。用纯CSS实现轮播简单高效，适合静态内容展示，不复杂但容易忽略细节如图片对齐和动画时间分配。
