使用CSS Grid与@keyframes实现自动轮播图：1. 通过grid-template-areas将幻灯片层叠定位；2. 利用关键帧动画按时间控制每张幻灯片的opacity显示隐藏；3. 为每个.slide设置不同animation延迟实现顺序播放；4. 配合:hover暂停动画提升交互体验，纯CSS驱动无需JavaScript。
要实现一个基于CSS Grid的轮播图并让其自动播放，可以通过grid-template-areas布局结合@keyframes动画来控制幻灯片切换。这种方式无需JavaScript，完全由CSS驱动，适合轻量级、静态内容展示。
1. 使用Grid定义轮播容器布局
先用CSS Grid将多个幻灯片定位在同一区域，形成层叠效果。每个幻灯片通过grid-area占据相同位置，便于轮流显示。
.carousel {
display: grid;
grid-template-areas: "slide";
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.slide {
grid-area: slide;
opacity: 0;
transition: opacity 0.5s ease;
}
所有.slide元素都放在同一个grid-area中，初始隐藏（opacity: 0），通过改变透明度实现切换视觉效果。
2. 利用@keyframes控制轮播动画
定义关键帧动画，按时间顺序让每张幻灯片依次显示（opacity: 1）和隐藏（opacity: 0）。
立即学习“前端免费学习笔记（深入）”；
@keyframes slideShow {
0%, 20% { opacity: 1; }
25%, 95% { opacity: 0; }
}
假设有5张幻灯片，每张显示5秒，则总周期为25秒。每个幻灯片在动画中占20%的时间段显示。
将动画应用到各个幻灯片，并设置不同的延迟时间：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
.slide:nth-child(1) {
animation: slideShow 25s infinite 0s;
}
.slide:nth-child(2) {
animation: slideShow 25s infinite 5s;
}
.slide:nth-child(3) {
animation: slideShow 25s infinite 10s;
}
.slide:nth-child(4) {
animation: slideShow 25s infinite 15s;
}
.slide:nth-child(5) {
animation: slideShow 25s infinite 20s;
}
这样每张图在轮播周期中按顺序出现，形成自动播放效果。
3. HTML结构配合Grid布局
确保HTML结构清晰，每个幻灯片包裹在容器中，便于样式控制。
<div class="carousel"> <div class="slide" style="background-image: url(image1.jpg);"></div> <div class="slide" style="background-image: url(image2.jpg);"></div> <div class="slide" style="background-image: url(image3.jpg);"></div> <div class="slide" style="background-image: url(image4.jpg);"></div> <div class="slide" style="background-image: url(image5.jpg);"></div> </div>
每个.slide可设置背景图或内嵌内容，统一通过Grid堆叠显示。
4. 可选优化：添加淡入淡出过渡与暂停悬停
提升用户体验，可以增强动画流畅性：
- 使用
animation-play-state: paused配合:hover实现悬停暂停 - 调整
ease-in-out缓动函数使切换更自然 - 添加指示器或导航按钮（需少量JS）
例如悬停暂停：
.carousel:hover .slide {
animation-play-state: paused;
}
基本上就这些。通过Grid布局与@keyframes结合，能高效实现纯CSS自动轮播图，结构清晰，维护简单，适合静态站点或作为基础组件使用。
