醉美水芙蓉 发表于 2026-8-7 22:29:39

马黑黑《多图循环平滑移动之background实现方式》

<style>
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox mark { padding: 2px 6px; background: #ccc; }
    .artBox p { margin: 10px 0; }
</style>

<div class="artBox">
    <h2>一、实现原理：</h2>
    <p><mark>background</mark> 是 <mark>background-image</mark>、<mark>background-repeat</mark>、<mark>background-position</mark>、<mark>background-size</mark>、<mark>background-color</mark> 等的简写属性，其中的 background-position 属性用于设置背景图片的位置。以背景图片自右向左移动为例：</p>
    <ol>
      <li>background-position 从 x 到 -x 的改变可以达成背景图片自右向左的移动效果；</li>
      <li>多张背景图片的 background-position 的水平方向可以依次按 0、x、2*x、...、n*x 往右平铺，形成图片横向并排的布局；</li>
      <li>最后一张背景图片和第一张相同，营造无缝循环的衔接效果。</li>
    </ol>
    <h2>二、完整代码（支持在线预览）：</h2>
    <div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    .pa {
      width: 1024px;
      height: 640px;
      background:
            url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat 0 0/cover,
            url('https://638183.freep.cn/638183/t22/webp/qqup.webp') no-repeat 1024px 0/cover,
            url('https://638183.freep.cn/638183/t22/webp/uwty.webp') no-repeat 2048px 0/cover,
            url('https://638183.freep.cn/638183/t24/7/dbxj.jpg') no-repeat 3072px 0/cover,
            url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat 4096px 0/cover;
      animation: bgmove 30s linear infinite var(--state);
      border: thick outset #333;
      margin: auto;
      --state: running;
    }
    .pa:hover { --state: paused; }
    .tMid { text-align: center; }
    @keyframes bgmove {
      to { background-position: -4096px 0, -3072px 0, -2048px 0, -1024px 0, 0 0; }
    }
&lt;/style&gt;

&lt;h1 class="tMid"&gt;多张背景图片循环平滑移动演示&lt;/h1&gt;
&lt;div class="pa"&gt;&lt;/div&gt;
    </pre></div>
    <h2>三、简要说明：</h2>
    <ol>
      <li>容器元素宽高比设置最好与图片的宽高比一致或接近，这样可以减少图片变形或被剪裁的风险；</li>
      <li>用 url() 函数加载每一张图片做背景，图片不重复（no-repeat）、各图片依次沿水平方向向右平铺（background-position）、尺寸（background-size）设置为 cover（覆盖整个容器）或 100% 100%；</li>
      <li>背景图片平铺涉及到水平方向的距离计算，第一张图片 background-position 的 x 为 0，第二张为 容器宽度*1px，第三张为 容器宽度*2px，其余以此类推。如果希望每张图片之间留出间隔缝隙，尺寸可以设置为大于容器宽度，位置跟着变更，方法是第一张图片水平方向位置 0 不变，其余按 (2-1)*x 计算水平方向位置；</li>
      <li>最后一张背景图片和第一张同，但 background-position 的 x 位置不一样，其作用是做循环衔接；</li>
      <li>关键帧动画的 background-position 属性 x 位置反向取值，要一一对应前面各图片的属性设置。</li>
    </ol>
    <p>【注意】平滑移动多个背景图片的有个重要前提：背景图片 background-size 应大于等于容器宽度。设置为 cover 或 100% 100% 时都满足这一前提。background-size 设置为 cover 时是图片覆盖整个容器，如果图片尺寸与容器宽高比不一致，图片会被剪裁；设为百分比或像素值时，图片得以完整呈现，但若图片尺寸和容器宽高比对不上，图片会扭曲、变形。</p>
</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-7 23:26:40

设计好 background-position 的x位置就好，例如，第二张开始，x 比 容器宽度大 8px，然后后面的依次加倍递增，（宽度+8）* 2，这样就可以了

klxf 发表于 2026-8-8 14:31:18

实用的教程，谢谢分享
页: [1]
查看完整版本: 马黑黑《多图循环平滑移动之background实现方式》