使用CSS实现轮播图效果，核心是通过overflow隐藏超出容器范围的内容，结合transform移动轮播项，再用animation定义循环动画实现自动切换，不需要依赖任何JavaScript代码。
基础布局搭建
首先需要搭建轮播图的HTML结构，外层容器控制显示区域，内层容器存放所有轮播项，每个轮播项占满显示区域。
<div class="carousel-container">
<div class="carousel-wrapper">
<div class="carousel-item">轮播项1</div>
<div class="carousel-item">轮播项2</div>
<div class="carousel-item">轮播项3</div>
<div class="carousel-item">轮播项4</div>
</div>
</div>
对应的基础CSS样式如下，设置外层容器固定宽高，隐藏溢出内容，内层容器横向排列所有轮播项：
.carousel-container {
width: 800px;
height: 400px;
overflow: hidden; /* 隐藏超出容器的轮播项 */
margin: 0 auto;
}
.carousel-wrapper {
display: flex;
width: 400%; /* 4个轮播项，总宽度为容器的4倍 */
height: 100%;
}
.carousel-item {
width: 25%; /* 每个轮播项占容器宽度的1/4 */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #fff;
}
/* 给不同轮播项设置不同背景色方便区分 */
.carousel-item:nth-child(1) { background-color: #409eff; }
.carousel-item:nth-child(2) { background-color: #67c23a; }
.carousel-item:nth-child(3) { background-color: #e6a23c; }
.carousel-item:nth-child(4) { background-color: #f56c6c; }
定义轮播动画
使用CSS的@keyframes定义动画，通过transform: translateX()移动内层容器，实现轮播项的切换效果。假设每个轮播项展示3秒，总动画时长12秒，4个轮播项刚好循环一次。
@keyframes carouselMove {
0% { transform: translateX(0); }
25% { transform: translateX(-25%); } /* 切换到第二个轮播项 */
50% { transform: translateX(-50%); } /* 切换到第三个轮播项 */
75% { transform: translateX(-75%); } /* 切换到第四个轮播项 */
100% { transform: translateX(0); } /* 回到第一个轮播项，形成循环 */
}
将定义好的动画绑定到内层容器上，设置无限循环、匀速播放：
.carousel-wrapper {
display: flex;
width: 400%;
height: 100%;
animation: carouselMove 12s infinite linear; /* 绑定动画，12秒循环一次，匀速播放 */
}
添加悬停暂停效果
通常轮播图需要支持鼠标悬停时暂停自动播放，鼠标移开恢复播放，这个效果可以通过animation-play-state属性实现。
/* 鼠标悬停在外层容器时，暂停内层容器的动画 */
.carousel-container:hover .carousel-wrapper {
animation-play-state: paused;
}
完整可运行代码
将上述所有代码整合后，就是一个完整的纯CSS轮播图实现，你可以直接复制到HTML文件中运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS轮播图</title>
<style>
.carousel-container {
width: 800px;
height: 400px;
overflow: hidden;
margin: 50px auto;
}
.carousel-wrapper {
display: flex;
width: 400%;
height: 100%;
animation: carouselMove 12s infinite linear;
}
.carousel-item {
width: 25%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #fff;
}
.carousel-item:nth-child(1) { background-color: #409eff; }
.carousel-item:nth-child(2) { background-color: #67c23a; }
.carousel-item:nth-child(3) { background-color: #e6a23c; }
.carousel-item:nth-child(4) { background-color: #f56c6c; }
@keyframes carouselMove {
0% { transform: translateX(0); }
25% { transform: translateX(-25%); }
50% { transform: translateX(-50%); }
75% { transform: translateX(-75%); }
100% { transform: translateX(0); }
}
.carousel-container:hover .carousel-wrapper {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-wrapper">
<div class="carousel-item">轮播项1</div>
<div class="carousel-item">轮播项2</div>
<div class="carousel-item">轮播项3</div>
<div class="carousel-item">轮播项4</div>
</div>
</div>
</body>
</html>
实现注意事项
- 轮播项的数量需要和
@keyframes中的关键帧数量对应，每个关键帧的translateX百分比为-(当前项索引-1)*100/轮播项总数% - 如果轮播项数量变化，需要同步修改
carousel-wrapper的总宽度、每个carousel-item的宽度占比，以及动画的关键帧规则 - 这种实现方式适合轮播项数量固定、不需要动态增减轮播项的场景，如果需要动态控制轮播，还是建议结合少量JavaScript实现