本文详解如何用纯 css 实现背景图片的「从右滑入 + 向左滑出」轮播效果，替代默认淡入淡出，支持首帧无动画、无缝循环，并提供可复用的结构化代码方案。
本文详解如何用纯 css 实现背景图片的「从右滑入 + 向左滑出」轮播效果，替代默认淡入淡出，支持首帧无动画、无缝循环，并提供可复用的结构化代码方案。
要让 CSS 轮播从“淡入淡出”升级为“滑动切换”，关键在于放弃 opacity 动画，转而使用 transform: translateX() 配合 animation 控制每张背景图的进出位置与时机。由于 background-image 本身不支持直接位移过渡（background-position 过渡仅适用于平铺偏移），最佳实践是：为每张图创建独立的 层，并通过绝对定位 + transform 实现滑动效果。
以下是一个完整、轻量、无需 JS 的纯 CSS 滑动轮播方案（兼容现代浏览器）：
✅ 核心思路
- 每个
- 包含一个 作为背景图容器；
- 所有 叠加在同一位置（position: absolute）；
- 利用 animation-delay 错开各图的入场/离场时间；
- 使用 transform: translateX() 控制水平位移（如 100% → 0% 入场，0% → -100% 离场）；
- 首帧（第 1 张）通过 animation-delay: -6s 实现「初始即显示，无入场动画」。
? 完整可运行代码
.slideshow,
.slideshow li,
.slideshow li span {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
margin: 0; padding: 0;
list-style: none;
z-index: 0;
}
.slideshow li span {
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* 初始状态：全部在右侧外 */
transform: translateX(100%);
animation: slideInOut 18s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* 每张图动画时序错开：6s 一帧 */
.slideshow li:nth-child(1) span { animation-delay: -6s; }
.slideshow li:nth-child(2) span { animation-delay: 0s; }
.slideshow li:nth-child(3) span { animation-delay: 6s; }
@keyframes slideInOut {
0%, 100% { transform: translateX(100%); } /* 隐藏在右侧 */
10% { transform: translateX(0); } /* 完全居中显示 */
20% { transform: translateX(0); } /* 保持显示 */
30% { transform: translateX(-100%); } /* 滑向左侧消失 */
}
⚠️ 关键注意事项
- 首帧无动画：通过 animation-delay: -6s 让第一张图在动画周期起始点即处于 10% 状态（即已滑入），视觉上无入场过程；
- 性能优化：使用 transform 和 opacity（若需叠加淡入）触发 GPU 加速，避免 left/top 引发重排；
- 图片路径校验：原问题中第三张图 URL 有拼写错误（placekititen.com → 应为 placekitten.com），生产环境务必检查；
- 响应式适配：background-size: cover 已保证缩放适配，如需移动端裁剪控制，可补充 @media 规则调整 background-position；
- 无障碍提示：若轮播含重要信息，建议添加 aria-live="polite" 和暂停/播放控件。
✅ 总结
相比依赖第三方库或 JavaScript 控制的方案，本方法以零 JS、语义清晰、易维护为优势，精准满足“滑动替代淡入”的需求。只需调整 animation-delay 和 @keyframes 中的时间节点，即可轻松扩展至 N 张图，且动画节奏（cubic-bezier）、方向（改用 translateY 即可垂直滑动）均可自由定制。对于追求性能与简洁性的现代 Web 项目，这是背景图轮播的推荐实现范式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
