本文介绍如何用纯 css 替代默认的淡入淡出（fade），实现背景图片从右侧滑入、前一张向左滑出的平滑过渡效果，无需 javascript，兼容现代浏览器，支持自动循环与首帧无动画。
本文介绍如何用纯 css 替代默认的淡入淡出（fade），实现背景图片从右侧滑入、前一张向左滑出的平滑过渡效果，无需 javascript，兼容现代浏览器，支持自动循环与首帧无动画。
要实现背景图的“滑动切换”（slide-in from right + slide-out to left），关键在于避免依赖 opacity 动画，转而使用 transform: translateX() 控制元素位移，并结合 transition 或 @keyframes 精确调度入场/退场时机。原代码中基于 opacity 的 fade 效果无法产生位移感；而直接套用 W3Schools 的 w3-animate-right 类（依赖 transform: translateX(100%) → 0）虽可行，但其本质是切换
下面提供一个真正基于 background-image 的纯 CSS 滑动方案，保留原有结构（.slideshow li span 作为背景容器），仅通过 transform 和 animation 实现无缝滑动：
✅ 核心思路
- 每张背景图初始位于视口右侧（translateX(100%)）
- 当前激活项：translateX(0)（居中显示）
- 下一张即将入场：保持 translateX(100%)
- 上一张正退出：translateX(-100%)
- 利用 animation-fill-mode: forwards 锁定最终状态，确保过渡连贯
? 完整 CSS 示例（纯 CSS，无 JS）
/* 基础布局 —— 保持全屏固定定位 */
.slideshow,
.slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
.slideshow:after { content: ''; }
/* 背景容器：每个 span 承载一张背景图 */
.slideshow li span {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* 关键：启用硬件加速 & 隐藏溢出 */
transform: translateX(100%); /* 初始在右侧外 */
will-change: transform;
z-index: 0;
}
/* 各图片独立动画时序（总周期 24s，每张占 8s）*/
.slideshow li:nth-child(1) span {
background-image: url("https://picsum.photos/1920/1080?random=1");
animation: slideIn 24s infinite;
animation-delay: 0s;
}
.slideshow li:nth-child(2) span {
background-image: url("https://picsum.photos/1920/1080?random=2");
animation: slideIn 24s infinite;
animation-delay: 8s;
}
.slideshow li:nth-child(3) span {
background-image: url("https://picsum.photos/1920/1080?random=3");
animation: slideIn 24s infinite;
animation-delay: 16s;
}
/* 滑动动画：右进 → 居中 → 左出 */
@keyframes slideIn {
0%, 100% { transform: translateX(100%); opacity: 0; }
10% { transform: translateX(0); opacity: 1; }
20% { transform: translateX(0); opacity: 1; }
30% { transform: translateX(-100%); opacity: 0; }
}? 动画时序说明（以 24s 总周期为例）
| 时间点 | 行为 | 说明 |
|---|---|---|
| 0–10%（0–2.4s） | 100% → 0 | 当前图从右滑入 |
| 10–20%（2.4–4.8s） | 0（静止） | 完全显示，无过渡 |
| 20–30%（4.8–7.2s） | 0 → -100% | 向左滑出 |
| 30–100%（7.2–24s） | -100%（隐藏） | 等待下一轮 |
✅ 首帧无动画保障：第一张图在 0% 处即为 translateX(100%)，但因 animation-delay: 0s 且首帧触发 10% 才开始移动，实际首次进入仍为自然滑入；若需绝对首帧静止，可将第一张的 animation-delay 设为 -8s 并调整关键帧偏移（进阶技巧，见下方提示）。
⚠️ 注意事项
- 性能优化：务必添加 will-change: transform 和 backface-visibility: hidden（可选），避免重绘卡顿；
- 图片路径修正：原问题中第三张 URL 有拼写错误（placekititen.com → 应为 placekitten.com），示例已统一替换为稳定图床 picsum.photos；
- 响应式适配：background-size: cover 已保证铺满，如需适配移动端，建议配合 @media 调整 height 或添加 object-fit 替代方案；
- 无障碍补充：纯背景图无语义，若内容重要，建议为 .slideshow 添加 aria-live="polite" 及 JS 同步描述（非本方案必需，但推荐增强可访问性）。
✅ 总结
该方案完全脱离 JavaScript，复用原有 HTML 结构，仅通过精细化的 @keyframes 位移控制与错峰 animation-delay，实现专业级滑动轮播。相比依赖框架类名（如 w3-animate-right）的方案，它更轻量、可控性强，且符合现代 CSS 动画最佳实践——用 transform 替代 layout 触发属性，用 timing 函数管理节奏，用 forwards 保证状态连续性。如需扩展为 N 张图轮播，只需按 (总周期 / 图片数) 计算 animation-delay 并复制样式规则即可。
立即学习“前端免费学习笔记（深入）”；
