如何用CSS动画实现流畅的图片轮播效果，避免图片加载导致黑屏？

打造丝滑顺畅的图片轮播效果：告别加载黑屏

很多应用场景都需要像播放视频一样展示图片，比如制作简单的图片幻灯片或产品图册。但直接替换图片路径容易因图片加载速度慢而导致黑屏。本文将介绍一种基于CSS动画的巧妙方法，完美解决这个问题。

核心问题在于如何避免图片加载慢带来的播放中断。逐张加载的方式，下一张图片加载未完成时，就会出现短暂黑屏。预加载多张图片虽然有效，但本文的方法更简洁高效。

我们的方案是将多张图片拼接成一张大图，然后用CSS动画控制背景图片的偏移量来实现图片切换。假设所有图片尺寸相同，例如都是500×300像素，则三张图片拼接后为1500×300像素的大图。通过CSS的background-position和animation属性，控制背景图片的显示区域，模拟图片播放效果。

立即学习“前端免费学习笔记（深入）”；

以下是一个CSS代码示例：

.container {  width: 500px;  height: 300px;  background: url("拼接后的图片") left / auto 100% no-repeat;  animation: play 3s steps(1, start) 0s infinite; /* 3s 为三张图片总播放时间 */}@keyframes play {  0% { background-position: 0 0; } /* 第1张 */  33.3% { background-position: -500px 0; } /* 第2张 */  66.7% { background-position: -1000px 0; } /* 第3张 */  100% { background-position: 0 0; } /* 回到第1张 */}

登录后复制