答案：纯css轮播图通过flex布局排列图片，利用transform位移、@keyframes定义动画实现自动切换。1. 用display: flex和overflow: hidden构建容器；2. 每张图宽100%，通过translateX按负百分比移动；3. @keyframes设定各阶段位移值，配合animation实现线性无限循环；4. 添加transition、will-change、backface-visibility优化流畅度与性能，支持hover暂停。适合静态内容轻量展示。
用CSS制作轮播图动画，关键在于掌握位移控制、定时切换和流畅过渡。不需要javaScript也能实现基础轮播，适合轻量级需求。核心思路是利用transform、@keyframes和animation属性来驱动图片自动位移。
1. 使用flex布局排列图片
将所有轮播图片放在一个容器内，使用Flexbox水平排列，避免换行。
建议设置容器display: flex，并关闭换行flex-wrap: nowrap，确保图片排成一行。
- 容器宽度固定，超出部分隐藏（
overflow: hidden） - 每张图片设为等宽，并占满容器可视区域
- 可借助
width: 100%让每张图撑满父容器
2. 利用transform实现平滑位移
通过transform: translateX()控制图片组的横向移动，每次移动一个屏幕宽度。
例如：有4张图，每张占100%宽度，整体需左移-300%才能轮播到最后一张。
- 位移值按负百分比递减：0%, -100%, -200%, -300%
- 结合
transition实现手动轮播的滑动效果 - 自动播放则依赖
@keyframes定义动画路径
3. 用@keyframes定义无限轮播动画
编写关键帧动画，让图片组循环执行位移动作。
立即学习“前端免费学习笔记（深入）”；
设置animation属性：持续时间、线性过渡、无限循环。
- 设定每个阶段的
translateX值对应不同图片位置 - 时间分配要均匀，比如4张图共4s，每张停留1s
- 使用
animation-timing-function: linear保持速度一致 - 加
animation-iteration-count: infinite实现循环
4. 优化视觉体验的小技巧
让轮播更自然、用户感知更舒适。
- 添加
will-change: transform提升动画性能 - 图片容器启用
backface-visibility: hidden防止闪烁 - 使用
ease-in-out或自定义贝塞尔曲线让过渡更柔和（可选） - 若需暂停动画，可用
:hover配合animation-play-state: paused
基本上就这些。纯CSS轮播适合静态内容展示，结构简单时很实用。虽然灵活性不如js，但加载快、无需交互逻辑，适合banner图或背景切换场景。不复杂但容易忽略细节，比如图片对齐和动画衔接。