一、实现原理：
background 是 background-image、background-repeat、background-position、background-size、background-color 等的简写属性，其中的 background-position 属性用于设置背景图片的位置。以背景图片自右向左移动为例：
- background-position 从 x 到 -x 的改变可以达成背景图片自右向左的移动效果；
- 多张背景图片的 background-position 的水平方向可以依次按 0、x、2*x、...、n*x 往右平铺，形成图片横向并排的布局；
- 最后一张背景图片和第一张相同，营造无缝循环的衔接效果。
二、完整代码（支持在线预览）：
<style>
.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; }
}
</style>
<h1 class="tMid">多张背景图片循环平滑移动演示</h1>
<div class="pa"></div>
三、简要说明：
- 容器元素宽高比设置最好与图片的宽高比一致或接近，这样可以减少图片变形或被剪裁的风险；
- 用 url() 函数加载每一张图片做背景，图片不重复（no-repeat）、各图片依次沿水平方向向右平铺（background-position）、尺寸（background-size）设置为 cover（覆盖整个容器）或 100% 100%；
- 背景图片平铺涉及到水平方向的距离计算，第一张图片 background-position 的 x 为 0，第二张为 容器宽度*1px，第三张为 容器宽度*2px，其余以此类推。如果希望每张图片之间留出间隔缝隙，尺寸可以设置为大于容器宽度，位置跟着变更，方法是第一张图片水平方向位置 0 不变，其余按 (2-1)*x 计算水平方向位置；
- 最后一张背景图片和第一张同，但 background-position 的 x 位置不一样，其作用是做循环衔接；
- 关键帧动画的 background-position 属性 x 位置反向取值，要一一对应前面各图片的属性设置。
【注意】平滑移动多个背景图片的有个重要前提：背景图片 background-size 应大于等于容器宽度。设置为 cover 或 100% 100% 时都满足这一前提。background-size 设置为 cover 时是图片覆盖整个容器，如果图片尺寸与容器宽高比不一致，图片会被剪裁；设为百分比或像素值时，图片得以完整呈现，但若图片尺寸和容器宽高比对不上，图片会扭曲、变形。
| 
发表于