使用CSS Grid、Flexbox和@keyframes可实现无JavaScript的响应式轮播图：1. 用语义化HTML结构配合--slide-count自定义属性；2. Grid布局控制容器居中与宽高比；3. Flexbox水平排列图片并防止压缩；4. @keyframes定义平移动画实现自动轮播；5. 媒体查询优化移动端动画时长与显示比例，提升体验。
响应式轮播图在现代网页设计中非常常见，结合 CSS 的 @keyframes 动画、Grid 与 Flexbox 布局，可以实现无需 JavaScript 的自动播放效果。下面是一个实用的实现思路和代码示例。
结构设计：使用语义化HTML
轮播图的基础结构应清晰简洁，便于样式控制：
<div class="carousel">
<div class="carousel-slide" style="--slide-count: 4;">
<img src="image1.jpg" alt="Slide 1" />
<img src="image2.jpg" alt="Slide 2" />
<img src="image3.jpg" alt="Slide 3" />
<img src="image4.jpg" alt="Slide 4" />
</div>
</div>
这里通过自定义属性 --slide-count 控制图片数量，方便后续计算动画时间。
CSS Grid 定义容器布局
使用 Grid 将轮播容器划分为固定区域，适合整体布局控制：
立即学习“前端免费学习笔记（深入）”；
.carousel {
display: grid;
place-items: center;
width: 100%;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #000;
}
place-items: center 让内容居中，aspect-ratio 保持响应式宽高比，适配不同设备。
Flexbox 实现图片横向排列与滚动
内部图片使用 Flexbox 水平排列，并隐藏溢出部分：
.carousel-slide {
display: flex;
width: calc(var(--slide-count) * 100%);
animation: slide-left 8s infinite linear;
}
<p>.carousel-slide img {
width: calc(100% / var(--slide-count));
flex-shrink: 0;
object-fit: cover;
}</p>每张图占总宽度的 1/数量，确保刚好铺满一行。flex-shrink 防止压缩，object-fit 保证图片填充一致。
关键帧动画实现自动轮播
使用 @keyframes 定义从左到右的平移动画：
@keyframes slide-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
动画将整个图片行向左移动一整张图的宽度（-100%），形成循环切换效果。时间 8s 可根据需求调整。
响应式优化：适配移动端
加入媒体查询，确保小屏幕体验良好：
@media (max-width: 768px) {
.carousel {
aspect-ratio: 1 / 1;
}
.carousel-slide {
animation-duration: 6s;
}
}
手机端缩短动画时间，避免等待过长，同时调整为正方形显示更合适。
基本上就这些。通过 Grid 控制整体容器，Flex 排列图像，配合 keyframes 实现自动播放，整个过程不依赖 JavaScript，性能好且易于维护。关键在于合理利用现代 CSS 特性组合解决问题。
