本文介绍如何用纯 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?random1); animation: slideIn 24s infinite; animation-delay: 0s;}.slideshow li:nth-child(2) span { background-image: url(https://picsum.photos/1920/1080?random2); animation: slideIn 24s infinite; animation-delay: 8s;}.slideshow li:nth-child(3) span { background-image: url(https://picsum.photos/1920/1080?random3); 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.4s100% → 0当前图从右滑入10–20%2.4–4.8s0静止完全显示无过渡20–30%4.8–7.2s0 → -100%向左滑出30–100%7.2–24s-100%隐藏等待下一轮? 首帧无动画保障第一张图在 0% 处即为 translateX(100%)但因 animation-delay: 0s 且首帧触发 10% 才开始移动实际首次进入仍为自然滑入若需绝对首帧静止可将第一张的 animation-delay 设为 -8s 并调整关键帧偏移进阶技巧见下方提示。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。