使用CSS animation和transform可实现无JavaScript的轮播图：首先构建包含多张图片的容器，设置绝对定位与溢出隐藏；通过@keyframes定义每张图的位移动画，利用animation-delay控制播放时机，使图片按序滑动切换，配合transition优化过渡效果，最终实现自动轮播。
制作一个简单的轮播图，使用 CSS 的 animation 和 transform 是一种轻量且高效的方式，无需 JavaScript。以下是具体实现步骤：
1. 结构布局（HTML）
创建一个容器来包裹所有轮播图片，每张图放在独立的元素中，通常使用 div 或直接用 img。
<div class="carousel"> <img src="image1.jpg" class="slide" alt="Slide 1"> <img src="image2.jpg" class="slide" alt="Slide 2"> <img src="image3.jpg" class="slide" alt="Slide 3"> </div>
2. 基础样式设置（CSS）
让轮播容器横向排列图片，并隐藏溢出部分，形成滑动视觉效果。
.carousel {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
<p>.slide {
width: 600px;
height: 400px;
position: absolute;
animation: slideAnimation 6s infinite;
}</p>注意：每张图初始位置重叠，通过 animation-delay 控制出场顺序。
立即学习“前端免费学习笔记（深入）”；
3. 定义动画关键帧（@keyframes）
使用 transform 移动图片位置，实现平滑切换。
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
@keyframes slideAnimation {
0%, 33.3% { transform: translateX(0); } /* 第一张 */
33.3%, 66.6% { transform: translateX(-100%); } /* 第二张 */
66.6%, 100% { transform: translateX(-200%); } /* 第三张 */
}
说明：
- 总时长 6s，每张图停留约 2s。
-
translateX(-100%)表示向左移动一整张图宽度，展示下一张。 - 百分比区间确保过渡自然，无跳跃。
4. 设置每张图的动画延迟
让三张图依次启动动画，形成轮播效果。
.slide:nth-child(1) {
animation-delay: 0s;
}
<p>.slide:nth-child(2) {
animation-delay: 2s;
}</p><p>.slide:nth-child(3) {
animation-delay: 4s;
}</p>这样每张图在正确的时间点开始滑入，循环播放。
5. 可选优化
添加平滑过渡效果，避免生硬切换。
.slide {
transition: transform 0.5s ease;
}
或调整动画缓动函数：
animation: slideAnimation 6s ease-in-out infinite;
基本上就这些。用纯 CSS 的 animation 和 transform 实现轮播图，关键是控制好时间点和位移距离，结构清晰就能顺利运行。
