用CSS制作基本轮播图效果不需要依赖JavaScript，核心是通过布局控制、动画关键帧和属性切换实现图片的自动轮播展示，适合轻量化的页面需求。
实现思路梳理
纯CSS轮播图的核心逻辑分为三个部分：首先是搭建外层容器，通过overflow:hidden隐藏超出容器范围的图片；其次是排列所有轮播图片为水平一行，通过transform:translateX控制显示不同的图片；最后是通过@keyframes定义动画，让图片容器按固定时间偏移，实现自动切换效果。
基础布局搭建
首先创建HTML结构，外层容器用来限制轮播图的显示区域，内层容器放置所有轮播图片：
<div class="carousel-container">
<div class="carousel-wrapper">
<img src="https://picsum.photos/800/400?random=2" alt="轮播图1">
<img src="https://picsum.photos/800/400?random=3" alt="轮播图2">
<img src="https://picsum.photos/800/400?random=4" alt="轮播图3">
</div>
</div>
对应的基础CSS样式如下，设置外层容器固定宽高，隐藏溢出内容，内层容器使用flex布局让图片水平排列：
.carousel-container {
width: 800px;
height: 400px;
overflow: hidden;
margin: 0 auto;
}
.carousel-wrapper {
display: flex;
width: 300%; /* 3张图片，总宽度为单张的3倍 */
height: 100%;
/* 定义动画，5秒完成一个循环 */
animation: carouselMove 5s infinite linear;
}
.carousel-wrapper img {
width: 33.333%; /* 单张图片占内层容器的1/3，即外层容器的100% */
height: 100%;
object-fit: cover;
}
定义轮播动画
通过@keyframes定义关键帧动画，控制内层容器在固定时间点偏移对应的宽度，实现图片切换：
@keyframes carouselMove {
0% {
transform: translateX(0);
}
33% {
transform: translateX(-33.333%);
}
66% {
transform: translateX(-66.666%);
}
100% {
transform: translateX(0);
}
}
这里的百分比对应每张图片的展示时间占比，3张图片的话每张占33%左右的动画时长，最后回到初始位置实现循环效果。
添加实用功能
悬停暂停轮播
可以通过:hover伪类控制动画暂停，当鼠标悬停在轮播图上时停止切换：
.carousel-container:hover .carousel-wrapper {
animation-play-state: paused;
}
添加指示点
可以在容器底部添加指示点，标记当前展示的图片位置，HTML结构补充如下：
<div class="carousel-container">
<div class="carousel-wrapper">
<img src="https://picsum.photos/800/400?random=2" alt="轮播图1">
<img src="https://picsum.photos/800/400?random=3" alt="轮播图2">
<img src="https://picsum.photos/800/400?random=4" alt="轮播图3">
</div>
<div class="carousel-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
对应的指示点CSS样式：
.carousel-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
}
.dot.active {
background-color: #fff;
}
如果需要指示点跟随轮播切换，纯CSS实现会比较复杂，基础版本可以先固定指示点样式，若需要联动效果可以结合少量JavaScript实现。
注意事项
- 轮播图片的数量需要和动画关键帧的偏移比例对应，新增图片时需要同步修改
carousel-wrapper的总宽度和关键帧的偏移值。 - 如果轮播图需要支持手动切换，纯CSS实现难度较高，建议结合少量JavaScript处理点击事件。
- 动画的时长和过渡效果可以根据实际需求调整，
linear是匀速切换，也可以换成ease-in-out实现缓动效果。