本文介绍如何使用纯 css 实现背景图像的「滑入滑出」过渡效果（从右向左平移），替代默认的 opacity 淡入淡出，同时确保首张图无初始动画，并保持循环播放与视觉连贯性。
本文介绍如何使用纯 css 实现背景图像的「滑入滑出」过渡效果（从右向左平移），替代默认的 opacity 淡入淡出，同时确保首张图无初始动画，并保持循环播放与视觉连贯性。
在现代网页设计中，全屏背景图轮播常用于首页横幅或视觉引导场景。虽然 opacity 动画简单易用，但缺乏动感与方向感；而滑动（slide）过渡能显著提升用户体验的流畅性与专业度。关键在于：不依赖 JavaScript 控制 DOM 显示/隐藏，而是通过 CSS transform + animation 精确调度多层背景的位移时序，实现无缝滑入滑出效果。
✅ 核心思路：位移叠加 + 关键帧错峰
我们放弃对 opacity 的依赖，转而利用 transform: translateX() 控制每张背景图的水平位置，并通过 @keyframes 定义其进入（从右→中心）、停留、退出（从中心→左）三个阶段。为保证「当前图静止、旧图左滑、新图右滑」的同步效果，需为每个
以下是完整可运行的纯 CSS 解决方案（兼容现代浏览器，无需 JS 或第三方库）：
/* 全局重置与容器定位 */
.slideshow {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style: none;
z-index: 0;
}
.slideshow li {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.slideshow li span {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
/* 初始状态：全部位于右侧外（不可见） */
transform: translateX(100%);
animation: slideIn 24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* 滑入动画：每张图分段控制 */
@keyframes slideIn {
/* 0% → 首帧：全部在右侧外 */
0% { transform: translateX(100%); }
/* 8% → 进入视野：滑至中心（可见） */
8% { transform: translateX(0); }
/* 33% → 停留期（占总周期约 1/3） */
33% { transform: translateX(0); }
/* 41% → 开始左滑退出 */
41% { transform: translateX(-100%); }
/* 100% → 完全滑出左侧 */
100% { transform: translateX(-100%); }
}
/* 各图片延迟启动，形成轮播链 */
.slideshow li:nth-child(1) span {
background-image: url("https://picsum.photos/1920/1080?random=1");
animation-delay: 0s; /* 首图立即启动，但首帧即为 translateX(0) → 无初始滑入 */
}
.slideshow li:nth-child(2) span {
background-image: url("https://picsum.photos/1920/1080?random=2");
animation-delay: -6s; /* 提前 6s 启动，使其在第 1 张停留末期开始滑入 */
}
.slideshow li:nth-child(3) span {
background-image: url("https://picsum.photos/1920/1080?random=3");
animation-delay: -12s;
}
/* ⚠️ 关键修复：首图无初始动画 */
/* 通过负延迟 + 关键帧起始点优化，使第一张图在页面加载时已处于 translateX(0) 状态 */
/* 若仍观察到首帧闪动，可添加以下强制初始化 */
.slideshow li:nth-child(1) span {
transform: translateX(0);
}<ul class="slideshow"> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul>
? 注意事项与最佳实践
- 性能优先：使用 transform 和 opacity 触发 GPU 加速，避免 left/top 或 background-position 动画（会触发重排）。
- 首图零动画：通过 animation-delay: 0s 配合 transform: translateX(0) 显式声明，确保首屏加载即显示首图，无滑入动作。
- 循环无缝性：总动画时长（如 24s）应被单图停留时间整除（例：3 图 × 8s = 24s），并用 cubic-bezier(0.4, 0, 0.2, 1) 模拟自然缓动。
- 响应式适配：background-size: cover 已保障缩放适配，若需移动端优化，可加媒体查询微调 animation-duration。
- 降级处理：旧浏览器不支持 @keyframes 时，建议回退至 opacity 方案，或引入 @supports (animation-name: slideIn) 条件规则。
? 扩展提示：如需「左右交替滑入」（如第2张从右进、第3张从左进），只需为对应 nth-child(n) 添加 transform: translateX(-100%) 初始值及反向关键帧即可，逻辑完全对称。
立即学习“前端免费学习笔记（深入）”；
此方案兼顾语义化、可维护性与性能，是构建高端视觉轮播的推荐 CSS 实践路径。
