论坛 › 马黑黑教程专版 › 纯CSS实现多图无限平滑循环滚动（通用方法）

马黑黑 发表于 2026-8-5 12:58

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

<style>
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox mark { padding: 2px 6px; background: #ccc; }
    .artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
    .artBox p { margin: 10px 0; }
    .tRed { color: red; }
</style>

<div class="artBox">
    <p>核心原理解释（以水平方向滚动为例）：</p>
    <blockquote>
      <ol>
            <li>HTML标签结构：<span class="tRed">父容器 + 子容器（子容器装载双份相同的图片标签）</span>；</li>
            <li>父容器固定宽高，相对定位</li>
            <li>子容器绝对定位，高度100%，设置为不折行（<span class="tRed">white-space: nowrap;</span>）；</li>
            <li>图片高度100%，需要双份相同的图片标签；</li>
            <li>子容器 animation 属性无限循环运行关键帧动画；</li>
            <li>关键帧动画使用 <span class="tRed">transform: translateX(-50%)</span> 作为移动终点（子容器移动一半时，后续相同的图片标签跟在后面形成衔接而非断档——具体情况是与下一轮开始瞬间的图片重叠，达成无缝交替效果）。</li>
      </ol>
    </blockquote>
    <p>应用实例：</p>
    <div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    .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%); }
    }
&lt;/style&gt;

&lt;div class="pa"&gt;
    &lt;div class="son"&gt;
      &lt;!-- 双份一模一样的图片标签 --&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-1.jpg" load="lazy" alt="" /&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-2.jpg" load="lazy" alt="" /&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-3.jpg" load="lazy" alt="" /&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-4.jpg" load="lazy" alt="" /&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-5.jpg" load="lazy" alt="" /&gt;
      
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-1.jpg" load="lazy" alt="" /&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-2.jpg" load="lazy" alt="" /&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-3.jpg" load="lazy" alt="" /&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-4.jpg" load="lazy" alt="" /&gt;
      &lt;img src="https://638183.freep.cn/638183/Pic/38/3-5.jpg" load="lazy" alt="" /&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;p style="text-align: center;"&gt;鼠标指针移动到上面方框可暂停动画&lt;/p&gt;
    </pre></div>
    <p>【说明】</p>
    <ol>
      <li>img标签 load="lazy" 属性设置意为图片懒加载，这对需要展示大量的图片时有节能作用：图片尚未进入屏幕可视区域时暂时不予加载，直到它们移动到可视区域；</li>
      <li>需要自左向右滚动图片的，改造关键帧动画如下：
<div class="hEdiv" data-prev="1"><pre class="hEpre">
@keyframes scroll {
    from { transform: translateX(-50%); }
    to { transform: translateX(0%); }
}
</pre></div>
      </li>
      <li>需要图片在垂直方向上滚动的，可参照本示例做些必要的改造。</li>
    </ol>
</div>

<script type="module">
    import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
    const divs = document.querySelectorAll('.hEdiv');
    const pres = document.querySelectorAll('.hEpre');
    divs.forEach((div,idx) => hl.hl(div, pres));
</script>

魏淑芬 发表于 2026-8-5 14:06

收藏。学习。谢谢马老师！{:4_171:}

梦江南 发表于 2026-8-5 14:11

黑黑老师下午嚎!

梦江南 发表于 2026-8-5 14:16

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

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

学习了{:4_180:}

杨帆 发表于 2026-8-5 15:05

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

夕阳黄昏 发表于 2026-8-5 16:52

模仿一个
<meta name="referrer" content="never" />
<style>
    #pa {
      width: 540px;
      height: 800px;
      border: 8px ridge gray;
      overflow: hidden; /* 重要 ：屏蔽溢出 */
      position: relative; /* 重要 ：相对定位 */
      margin: auto;
      --state: running; /* 动画开关 */
                                margin: auto;
                               
                                &:hover {
                                                --state: paused; /* 鼠标指针移动到 .pa 时暂停动画 */
                                }
                               
                                #son {
                                                position: absolute; /* 重要 ：绝对定位 */
                                                width: 100%; /* 百分百宽度 */
                                                /**        white-space: nowrap;垂直滚动就不需要了 */
                                                /* 动画周期时长应根据图片水平衔接的长度调整 */
                                                animation: scroll 200s linear infinite var(--state);
                                               
                                                img {
                                                                width: 100%; /* 图片宽度与容器一致（高度自适应）*/
                                                                margin: 3px 0px; /* 图片之间的上下距离 */
                                                }
                                }
    }
/******************* move up ******************************/
    @keyframes scroll {
      to { transform: translateY(-50%); }
    }
/*************** move down *******************************
@keyframes scroll {
    from { transform: translateY(-50%); }
    to { transform: translateY(0%); }
}
********************************************************/
</style>

<div id="pa">
    <div id="son">
      <!-- 双份一模一样的图片标签 -->
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OlgMLSFiahNfEcJt4SppMofYXcxo8VYf0GLTNBGmnBN080yH85kcziaMyDSZndoCrB26PST2lxyhMlypYmibu98KD16LVPicoYO4Kg/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OlmvqblXCmORHSgibgcQyKDWQVGgQ8S8iam6jsxxMpopkL6097QrDpqZvzvkZwFr0QEWjSvJGvSWG9PVq7fVtiaOK6cibb6RsODDKM/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6On8mF67pJ6qu9rcPtelNI3HSr5lkyRMH7ORPFQXDlrLibhpSfkXdpia7KZ3N7kHzONeTmTbtiaQbwicwz1nJhVHsuJSxSiaHd0xcsWM/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/dVs9AHZr6OnicSiaUL3xsfL1FoqsRkShQOvtpic09FcQMILSwydhH06DuyWsUPgy6FnkboZyGiamwAOyjVJicSsiadjW4owq3Qbj3PDeEAMmydeibc/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Ok85KrCOKVCp4fWae7cicnC4x2vWT6WNgBdnDa0iaWHfey36VKqLuaFUvWtmAuicYzbQM3ZaxarrTJDYH4jul2swvibibfhcOYwyYwI/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OnqviaPz3lcOEsxUMsVTzU8sqNBACBfM04yT6HBHJ4Hw6tiaiaiaLk9pkkbrYHxJ0iay7QXjtoCrgKa7yNlr9STy0VDEovSvkDSGMnc/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnOPhafiapF9GGaBtnQQ4oNGlYoMkiaXj6wz5JVsLicwtdA1dPLBHT8Qhfkng3mtVjFmzRC0uw4A89SGowo0mNZfxHu7Uuc1qiasHA/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnZVkWBv8phyhkzBrwMHApA2S9sh5iaeDYrjBTxRTkSeiaiaNZIY2Dnw9VJy1R7oD4KQJVSMpcsylwVEP4fkRNkKxtUibn8aGnysM8/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OnT6y2yWxXSiceZHYRtzh6JET6e48C09z9nyFTEB1nZvGD6ZAuxWs6TSxf4kcQUqgJ6lUO2ee09Fu8Jth2uZ8EgZstaMEQoKgWc/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnpgRibhVouj5Jx1yCsMMUTsDyqQibw3l4VoApBKoA1wFcbjUdzja5uHYbaXGme2vEKBRYo4ibbGGhkBrFKQU4tltp2bpGQHIASwg/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OkVAWvMV62hddDkZP3IydLBGNS9pFACOG6GgRiawFIeyebQLY3AqS8XISNic7vK8pUrQ2SOxIq2333VRhoIDCK3ice6ZEVpR11cSs/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6Ok8tWJzrOWc1q6gvXX8GTpKsfvOYiau9Epv9xSIovz43cCtjicJ8sBAicInIjofOma6XvJ6TKVapbG7wgce8vdmtrWtmQZibVseem0/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6Ol59gqwTX3NxLRHDeh0jyZpM3ibNUrjTgFqbtJtht0mHKlbezgX6CxxqhMGqa3Eo9jLVCocbV6EH7R7qG5KUnI1VyibwoXFF3ZGw/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OkmEwF2AnC1n4r42a0Inu4UrHjQlPsficEiaLEr5FicRGx1Gs65JgQrz9uSm6jXFss6DSwibmIVHtAVjTl6wMgssEOsWvxQz2KiaRQ8/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnNPVyfo8wWyL3zxL9x8QDWuMdhzeKE5uoEtauSToibhL4dkAXWKIvbVdsfRrnCicoFh1xE0EMiccObXycqNZIbjfGGiaLenmzBia4U/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnicG9qtntQPo7iaJwcibgla3P3mMov0yfWCnPx75wYjIj6j29uj9WFcak8YX4gX2mJovTZwbYoIRe5xPEdtRtgtSWOnent82t3DA/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OlDSZLSibbUGqy3ibFG6icIVu8aWVGiav3pSdhXB6zKcCmzTGNGzDUGOVTQ9OSqribiaza5qJrfttqW0UI1Ax6hJiapCdgLibmtc3BkAAc/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Ok29x35yJ7RNZawg49ZdQq44zWib1ibZP6F5A0hUm2QhKDwP4a0ibQgib2tza8fZ4TNy4xru6pkNK6nakzlNMzgwXPQ0e8iaPMS30Y0/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OmYpf7ia30xGxVgfQOJDIMvpnEiabibzRpsJW7L624wXIvQ4RFq2VSx9RH456pyBOgVibUXlibxhZqDkRCqaicz0CicdOegMHk5zeuzLM/640" load='lazy' />
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------->
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OlgMLSFiahNfEcJt4SppMofYXcxo8VYf0GLTNBGmnBN080yH85kcziaMyDSZndoCrB26PST2lxyhMlypYmibu98KD16LVPicoYO4Kg/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OlmvqblXCmORHSgibgcQyKDWQVGgQ8S8iam6jsxxMpopkL6097QrDpqZvzvkZwFr0QEWjSvJGvSWG9PVq7fVtiaOK6cibb6RsODDKM/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6On8mF67pJ6qu9rcPtelNI3HSr5lkyRMH7ORPFQXDlrLibhpSfkXdpia7KZ3N7kHzONeTmTbtiaQbwicwz1nJhVHsuJSxSiaHd0xcsWM/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/dVs9AHZr6OnicSiaUL3xsfL1FoqsRkShQOvtpic09FcQMILSwydhH06DuyWsUPgy6FnkboZyGiamwAOyjVJicSsiadjW4owq3Qbj3PDeEAMmydeibc/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Ok85KrCOKVCp4fWae7cicnC4x2vWT6WNgBdnDa0iaWHfey36VKqLuaFUvWtmAuicYzbQM3ZaxarrTJDYH4jul2swvibibfhcOYwyYwI/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OnqviaPz3lcOEsxUMsVTzU8sqNBACBfM04yT6HBHJ4Hw6tiaiaiaLk9pkkbrYHxJ0iay7QXjtoCrgKa7yNlr9STy0VDEovSvkDSGMnc/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnOPhafiapF9GGaBtnQQ4oNGlYoMkiaXj6wz5JVsLicwtdA1dPLBHT8Qhfkng3mtVjFmzRC0uw4A89SGowo0mNZfxHu7Uuc1qiasHA/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnZVkWBv8phyhkzBrwMHApA2S9sh5iaeDYrjBTxRTkSeiaiaNZIY2Dnw9VJy1R7oD4KQJVSMpcsylwVEP4fkRNkKxtUibn8aGnysM8/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OnT6y2yWxXSiceZHYRtzh6JET6e48C09z9nyFTEB1nZvGD6ZAuxWs6TSxf4kcQUqgJ6lUO2ee09Fu8Jth2uZ8EgZstaMEQoKgWc/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnpgRibhVouj5Jx1yCsMMUTsDyqQibw3l4VoApBKoA1wFcbjUdzja5uHYbaXGme2vEKBRYo4ibbGGhkBrFKQU4tltp2bpGQHIASwg/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OkVAWvMV62hddDkZP3IydLBGNS9pFACOG6GgRiawFIeyebQLY3AqS8XISNic7vK8pUrQ2SOxIq2333VRhoIDCK3ice6ZEVpR11cSs/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6Ok8tWJzrOWc1q6gvXX8GTpKsfvOYiau9Epv9xSIovz43cCtjicJ8sBAicInIjofOma6XvJ6TKVapbG7wgce8vdmtrWtmQZibVseem0/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6Ol59gqwTX3NxLRHDeh0jyZpM3ibNUrjTgFqbtJtht0mHKlbezgX6CxxqhMGqa3Eo9jLVCocbV6EH7R7qG5KUnI1VyibwoXFF3ZGw/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OkmEwF2AnC1n4r42a0Inu4UrHjQlPsficEiaLEr5FicRGx1Gs65JgQrz9uSm6jXFss6DSwibmIVHtAVjTl6wMgssEOsWvxQz2KiaRQ8/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnNPVyfo8wWyL3zxL9x8QDWuMdhzeKE5uoEtauSToibhL4dkAXWKIvbVdsfRrnCicoFh1xE0EMiccObXycqNZIbjfGGiaLenmzBia4U/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnicG9qtntQPo7iaJwcibgla3P3mMov0yfWCnPx75wYjIj6j29uj9WFcak8YX4gX2mJovTZwbYoIRe5xPEdtRtgtSWOnent82t3DA/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OlDSZLSibbUGqy3ibFG6icIVu8aWVGiav3pSdhXB6zKcCmzTGNGzDUGOVTQ9OSqribiaza5qJrfttqW0UI1Ax6hJiapCdgLibmtc3BkAAc/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Ok29x35yJ7RNZawg49ZdQq44zWib1ibZP6F5A0hUm2QhKDwP4a0ibQgib2tza8fZ4TNy4xru6pkNK6nakzlNMzgwXPQ0e8iaPMS30Y0/640" load='lazy' />
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OmYpf7ia30xGxVgfQOJDIMvpnEiabibzRpsJW7L624wXIvQ4RFq2VSx9RH456pyBOgVibUXlibxhZqDkRCqaicz0CicdOegMHk5zeuzLM/640" load='lazy' />
                </div>
</div>

红影 发表于 2026-8-5 17:45

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

马黑黑 发表于 2026-8-5 18:39

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

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

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

马黑黑 发表于 2026-8-5 18:41

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

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

马黑黑 发表于 2026-8-5 18:42

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

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

马黑黑 发表于 2026-8-5 18:42

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

{:4_190:}

马黑黑 发表于 2026-8-5 18:42

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

{:4_191:}

马黑黑 发表于 2026-8-5 18:43

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

都嚎都嚎

霜染枫丹 发表于 2026-8-5 19:41

马老师晚上好~~

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

杨帆 发表于 2026-8-5 19:43

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

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

马黑黑 发表于 2026-8-5 20:22

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

感谢支持

马黑黑 发表于 2026-8-5 20:23

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

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

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

霜染枫丹 发表于 2026-8-5 20:50

马黑黑 发表于 2026-8-5 20:23
这个也可以用来发布你的拍摄作品
我今晚就做一个，用处很多，图文中视频中的画中画，PPT中的场景说明，太完美了！！{:4_190:}{:4_199:}

马黑黑 发表于 2026-8-5 21:39

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

用途确实广泛

查看完整版本: 纯CSS实现多图无限平滑循环滚动（通用方法）