使用CSS @keyframes 和 transform 实现轮播图自动播放：1. 用HTML构建图片容器；2. 设置容器溢出隐藏和图片绝对定位；3. 定义关键帧动画控制每张图的显示与切换；4. 为每张图设置不同延迟时间；5. 利用 transform 实现滑动过渡，形成无缝轮播效果。
要实现一个CSS初级项目中的轮播图自动播放效果，可以通过 @keyframes 动画结合 transform 属性来完成。这种方式无需JavaScript，适合学习CSS动画基础的同学。
1. 基本结构：HTML布局
轮播图通常由一个容器包裹多个图片项。使用无序列表或div结构即可：
<div class="carousel"> @@##@@ @@##@@ @@##@@ </div>
2. 样式设置：定位与隐藏溢出
确保轮播容器只显示一张图片，其余内容隐藏：
.carousel {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
这里使用 opacity 控制显隐，也可以用 transform 移动位置。
3. 使用@keyframes定义循环动画
通过关键帧控制每张图的显示时长和过渡。假设每张图停留2秒，整个循环6秒：
@keyframes slideShow {
0% {
opacity: 1;
transform: translateX(0);
}
15% {
opacity: 1;
transform: translateX(0);
}
20% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 0;
transform: translateX(100%);
}
}
上面规则表示第一张图在0%-15%时间段显示，15%-20%开始切换，以此类推。三个图可扩展为多个阶段。
4. 应用动画到每个图片项
给每张图片分别设置动画，并错开延迟时间，形成轮播效果：
.slide:nth-child(1) {
animation: slideShow 6s ease-in-out infinite;
animation-delay: 0s;
}
.slide:nth-child(2) {
animation: slideShow 6s ease-in-out infinite;
animation-delay: 2s;
}
.slide:nth-child(3) {
animation: slideShow 6s ease-in-out infinite;
animation-delay: 4s;
}
这样每张图依次进入，延迟启动动画，整体形成无缝轮播。
5. 加上平滑过渡效果
使用 transform 替代透明度变化，视觉更流畅。比如从右向左滑动：
@keyframes slideMove {
0%, 15% {
transform: translateX(0);
opacity: 1;
}
20%, 100% {
transform: translateX(100%);
opacity: 0;
}
}
配合绝对定位和层级管理，就能实现平推动画。
基本上就这些。通过合理设置关键帧时间和延迟，就能让轮播图自动循环播放。虽然不如JS灵活，但非常适合练手和理解CSS动画机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
