纯CSS实现多图无限平滑循环滚动（通用方法）

马黑黑

核心原理解释（以水平方向滚动为例）：

1. HTML标签结构：父容器 + 子容器（子容器装载双份相同的图片标签）；
2. 父容器固定宽高，相对定位
3. 子容器绝对定位，高度100%，设置为不折行（white-space: nowrap;）；
4. 图片高度100%，需要双份相同的图片标签；
5. 子容器 animation 属性无限循环运行关键帧动画；
6. 关键帧动画使用 transform: translateX(-50%) 作为移动终点（子容器移动一半时，后续相同的图片标签跟在后面形成衔接而非断档——具体情况是与下一轮开始瞬间的图片重叠，达成无缝交替效果）。

应用实例：

<style>
    .pa {
        width: 1024px;
        height: 600px;
        border: 8px dotted gray;
        overflow: hidden; /* 重要 ：屏蔽溢出 */
        position: relative; /* 重要 ：相对定位 */
        margin: auto;
        --state: running; /* 动画开关 */
    }
    .pa:hover {
        --state: paused; /* 鼠标指针移动到 .pa 时暂停动画 */
    }
    .son {
        position: absolute; /* 重要 ：绝对定位 */
        height: 100%; /* 百分百高度 */
        white-space: nowrap; /* 重要 ：不折行，水平伸展 */
        /* 动画周期时长应根据图片水平衔接的长度调整 */
        animation: scroll 28s linear infinite var(--state);
    }
    .son img {
        height: 100%; /* 图片高度与容器一致（宽度自适应）*/
        margin: 0 6px; /* 图片之间的左右距离 */
    }
    @keyframes scroll {
        to { transform: translateX(-50%); }
    }
</style>

<div class="pa">
    <div class="son">
        <!-- 双份一模一样的图片标签 -->
        <img src="https://638183.freep.cn/638183/Pic/38/3-1.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-2.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-3.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-4.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-5.jpg" load="lazy" alt="" />
        
        <img src="https://638183.freep.cn/638183/Pic/38/3-1.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-2.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-3.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-4.jpg" load="lazy" alt="" />
        <img src="https://638183.freep.cn/638183/Pic/38/3-5.jpg" load="lazy" alt="" />
    </div>
</div>
<p style="text-align: center;">鼠标指针移动到上面方框可暂停动画</p>
    

【说明】

1. img标签 load="lazy" 属性设置意为图片懒加载，这对需要展示大量的图片时有节能作用：图片尚未进入屏幕可视区域时暂时不予加载，直到它们移动到可视区域；
2. 需要自左向右滚动图片的，改造关键帧动画如下：

   @keyframes scroll {
       from { transform: translateX(-50%); }
       to { transform: translateX(0%); }
   }
   

3. 需要图片在垂直方向上滚动的，可参照本示例做些必要的改造。

魏淑芬

收藏。学习。谢谢马老师！

梦江南

黑黑老师下午嚎!

梦江南

这多张图片移动的代码很好，图片只限制高度不限宽度还设置了好看边框，可以改变移动方向。太赞了！

梦江南

学习了

杨帆

有原理有实例，通性通法可扩展，谢谢马老师讲授与示范

夕阳黄昏

模仿一个

红影

“动画周期时长应根据图片水平衔接的长度调整”，这句没看懂，这个周期数字是怎么得来的呢？

马黑黑

红影 发表于 2026-8-5 17:45
“动画周期时长应根据图片水平衔接的长度调整”，这句没看懂，这个周期数字是怎么得来的呢？

自己调整，快了就调长一点的时间，反之减少时间。

原理是时间、速度与距离的关系。图片衔接起来越长，跑一轮的周期时长不能太短，否则移动速度会很快。

马黑黑

杨帆 发表于 2026-8-5 15:05
有原理有实例，通性通法可扩展，谢谢马老师讲授与示范

这个案例网上都有，可能是我把原理讲得透一些或者通俗一些

马黑黑

梦江南 发表于 2026-8-5 14:16
这多张图片移动的代码很好，图片只限制高度不限宽度还设置了好看边框，可以改变移动方向。太赞了！{:4_199: ...

这个应该是容易学到做到的吧

马黑黑

梦江南 发表于 2026-8-5 14:18
学习了

马黑黑

魏淑芬 发表于 2026-8-5 14:06
收藏。学习。谢谢马老师！

马黑黑

梦江南 发表于 2026-8-5 14:11
黑黑老师下午嚎!

都嚎都嚎

霜染枫丹

马老师晚上好~~

这真是个好东东，很感谢有您的分享！我跑了一下，特别顺畅，而且更容易掌控调整。先抱走后制作。辛苦了，祝安好！

杨帆

马黑黑 发表于 2026-8-5 18:41
这个案例网上都有，可能是我把原理讲得透一些或者通俗一些

是，把原理讲得透一些或者通俗一些并不容易呢，谢谢马老师

马黑黑

杨帆 发表于 2026-8-5 19:43
是，把原理讲得透一些或者通俗一些并不容易呢，谢谢马老师

感谢支持

马黑黑

霜染枫丹 发表于 2026-8-5 19:41
马老师晚上好~~

这真是个好东东，很感谢有您的分享！我跑了一下，特别顺畅，而且更容易掌控调整。先抱走 ...

这个也可以用来发布你的拍摄作品

霜染枫丹

马黑黑 发表于 2026-8-5 20:23
这个也可以用来发布你的拍摄作品

我今晚就做一个，用处很多，图文中视频中的画中画，PPT中的场景说明，太完美了！！

马黑黑

霜染枫丹 发表于 2026-8-5 20:50
我今晚就做一个，用处很多，图文中视频中的画中画，PPT中的场景说明，太完美了！！

用途确实广泛