CSS 背景图滑动切换：纯 CSS 实现右进左出轮播效果

本文介绍如何用纯 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）虽可行，但其本质是切换 <li> 元素的显隐，且需 JS 控制显示逻辑——这与用户诉求“纯 CSS 背景图轮播”存在偏差。下面提供一个真正基于 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 并调整关键帧偏移（进阶技巧，见下方提示）。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。