使用纯CSS实现响应式轮播图，通过HTML结构搭建图片容器，利用flex布局与object-fit确保图片自适应，结合@keyframes定义translateX动画实现自动切换，设置关键帧控制每张图停留时间，再通过媒体查询在移动端调整宽度与动画节奏，使小屏设备每次显示一张图并延长展示时间，提升可读性与兼容性。
制作响应式轮播图动画，关键在于结合 CSS 动画与媒体查询，让图片在不同设备上平滑切换并自适应屏幕。下面是一个简洁实用的实现方法，无需 JavaScript，纯 CSS 实现基础自动轮播效果。
1. HTML 结构设计
使用一个容器包裹所有轮播图片，每张图用 figure 标签独立封装，便于控制动画时序。
@@##@@ @@##@@ @@##@@ @@##@@
2. 基础 CSS 样式与响应式布局
设置容器宽度为 100%，图片充满容器并保持比例。使用 flexbox 排列图片，并隐藏溢出内容。
.carousel {
width: 100%;
overflow: hidden;
position: relative;
height: 60vw;
max-height: 500px;
}
.carousel figure {
margin: 0;
float: left;
width: 25%; / 四张图均分 /
}
.carousel figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
3. 使用 @keyframes 创建轮播动画
定义一个循环动画，通过水平位移（translateX）实现图片连续滚动。总宽度为四张图，所以移动 -75% 完成一次切换。
立即学习“前端免费学习笔记（深入）”；
jQuery bootstrap响应式网站模板，风格简洁适用范围广，它配备了谷歌地图,滑动轮播图,平滑的滚动动画。使用最新的Web 开发工具(如 HTML5、CSS3 和 jQuery)构建。
@keyframes slide {
0% { transform: translateX(0); }
12.5% { transform: translateX(0); }
25% { transform: translateX(-25%); }
37.5% { transform: translateX(-25%); }
50% { transform: translateX(-50%); }
62.5% { transform: translateX(-50%); }
75% { transform: translateX(-75%); }
87.5% { transform: translateX(-75%); }
100% { transform: translateX(0); }
}
.carousel {
animation: slide 12s infinite;
}
每个状态停留一段时间再跳转，确保视觉流畅。动画周期可根据需要调整，比如 12 秒内完成四次切换。
4. 适配移动端：使用媒体查询优化体验
在小屏幕上，可改为每次只显示一张图，并调整动画节奏更清晰。
@media (max-width: 768px) {
.carousel figure {
width: 100%;
}
@keyframes slide-mobile {
0% { transform: translateX(0); }
16% { transform: translateX(0); }
25% { transform: translateX(-100%); }
41% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
66% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
91% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}
.carousel {
animation: slide-mobile 16s infinite;
}
}
这样在手机上每张图展示约 4 秒，更易阅读。也可以考虑降低动画速度或暂停自动播放，提升可访问性。
基本上就这些。通过合理使用 transform、@keyframes 和 媒体查询，就能做出轻量且响应式的轮播图动画。虽然功能不如 JS 强大，但加载快、兼容好，适合静态展示场景。
