轮播图通过HTML结构、CSS flex布局与transform动画实现自动切换。1. 用div容器和background-image构建三张图片；2. 轮播容器设为flex，宽度固定并隐藏溢出；3. 利用@keyframes定义分段translateX位移，每2秒切换一张图，6秒循环；4. 添加transition平滑效果和伪元素指示器提升视觉反馈。核心为CSS动画控制偏移，实现无缝轮播。
实现一个基本的轮播图效果，可以用 HTML、CSS 和少量 JavaScript 配合完成。这里重点讲解如何用 CSS 控制结构和动画，让轮播图具备自动切换、平滑过渡的效果。
1. 基本 HTML 结构
轮播图通常包含一个容器，内部是多个图片项。使用无序列表或 div 容器都可以：
2. 使用 CSS 设置布局与滚动行为
利用 flexbox 将所有图片水平排列，并设置容器只显示一张图的宽度，隐藏其余部分。
.carousel {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.carousel-slide {
width: 600px;
height: 400px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
给轮播容器添加 display: flex，使所有图片排成一行：
立即学习“前端免费学习笔记（深入）”；
.carousel {
display: flex;
transition: transform 0.5s ease-in-out;
}
3. 实现自动轮播动画
使用 CSS @keyframes 定义位移动画，每隔几秒切换一张图。
@keyframes slide {
0% { transform: translateX(0); }
25% { transform: translateX(0); }
33.3% { transform: translateX(-600px); }
58.3% { transform: translateX(-600px); }
66.6% { transform: translateX(-1200px); }
91.6% { transform: translateX(-1200px); }
100% { transform: translateX(0); }
}
.carousel {
animation: slide 6s infinite;
}
说明：假设每张图宽 600px，三张图总宽 1800px。动画分三段：
- 前 2 秒显示第一张（translateX(0)）
- 中间 2 秒显示第二张（translateX(-600px)）
- 后 2 秒显示第三张（translateX(-1200px)）
- 最后回到第一张，形成循环
4. 添加指示点或过渡优化
可以加一些视觉反馈，比如底部小圆点指示当前页：
.carousel::after {
content: "";
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 10px;
background: rgba(0,0,0,0.5);
border-radius: 5px;
}
也可以配合伪元素或额外标签做更精细的指示器，但核心轮播逻辑由 CSS 动画驱动即可。
基本上就这些。纯 CSS 轮播适合静态内容展示，若需更多交互（如手动滑动、暂停），再结合 JavaScript 控制 transform 值会更灵活。不复杂但容易忽略细节，比如动画时间分配和衔接。
