答案是使用CSS的animation和@keyframes可实现图片自动轮播，通过translateX控制横向位移，配合overflow:hidden容器形成滑动效果，适合静态展示。
用CSS制作轮播图效果，核心是利用动画（animation）和关键帧（@keyframes）来控制图片的自动切换。虽然完整的轮播图通常需要JavaScript实现交互功能，但纯CSS也能做出自动播放的轮播效果，适合静态展示。
1. 基本HTML结构
准备一个容器，内部包含多张图片，使用单个容器横向排列所有图片：
<div class="carousel"><img src="image1.jpg" alt="Image 1" class="carousel-image">
<img src="image2.jpg" alt="Image 2" class="carousel-image">
<img src="image3.jpg" alt="Image 3" class="carousel-image">
</div>
2. 使用CSS布局图片
将所有图片放在一行，超出容器部分隐藏，形成滑动视觉效果：
.carousel {width: 400px;
height: 300px;
overflow: hidden;
margin: 50px auto;
position: relative;
}
.carousel-image {
width: 400px;
height: 300px;
object-fit: cover;
float: left;
}
3. 添加动画实现自动轮播
通过@keyframes定义图片的移动位置，让整个图片组向左滑动：
立即学习“前端免费学习笔记（深入）”；
@keyframes slide {
0% { transform: translateX(0); }
33% { transform: translateX(0); }
34% { transform: translateX(-400px); }
66% { transform: translateX(-400px); }
67% { transform: translateX(-800px); }
100% { transform: translateX(-800px); }
}
.carousel {
animation: slide 9s infinite;
animation-timing-function: ease-in-out;
}
说明：假设有3张图，每张宽400px，总宽度1200px。动画分三段，每段停留约3秒，通过transform: translateX控制偏移量实现切换。
4. 可选：添加指示点或过渡平滑效果
为了让切换更自然，可以调整timing-function为ease或cubic-bezier。也可以在底部加小圆点表示当前图片：
content: "";
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
/ 实际中可用伪元素或额外HTML标签实现圆点 /
基本上就这些。纯CSS轮播图适合简单场景，比如背景展示或无需交互的宣传图。如果需要手动点击切换、暂停悬停等功能，建议结合JavaScript增强控制能力。不复杂但容易忽略的是动画时间分配和translate值的精确计算。
