本文介绍如何用纯 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助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。
相关推荐
hhcgchpspk9 分钟前
flask服务端页面预防被爬措施小小张说故事13 分钟前
Python 里 copy.copy() 和 deepcopy() 到底差在哪：拆开 __copy__、__deepcopy__ 和那个防止无限递归的 memo 字典vipxieliang14 分钟前
Python collections：高效容器与实战案例青少儿编程课堂29 分钟前
蓝桥杯青少组图形化 STEMA 省考（报名倒计时·11/22开考）+ 全国青少年信息素养大赛 2026—2027赛季 + 电子学会图形化考级：校园华容道大闯关特创数字科技38 分钟前
写了个 Windows 下载器：一键拉 GitHub / Gitee 源码，带 SHA256 校验codigger1 小时前
线上数据库连接池打满：从应急止损到架构根治的完整方案倔强的石头_1 小时前
集中式与分布式怎么选？我把手头11套系统重新过了一遍秤挖掘狂人1 小时前
线上数据库连接池打满：从应急止损到架构根治的完整方案Rainmicro1 小时前
【无标题】郝学胜-神的一滴2 小时前
AI 编程智能体 27：吃透MCP通信机制