利用background-position配合@keyframes可实现轻量级背景动画。1. 原理：通过改变背景位置产生位移视觉效果，结合animation实现连续动画，适用于横向滚动、垂直流动或无缝循环场景。2. 实现步骤：设置background-repeat铺满背景，定义animation调用关键帧，如从0%到100%移动background-position实现左滚。3. 技巧：使用大图减少跳跃，调整缓动函数、反向滚动、控制Y轴做垂直动画或多层叠加实现视差。4. 注意事项：容器需明确宽高，避免图片过大影响性能，非无缝图应拼接处理，必要时加浏览器前缀。核心是理解“位置变化”而非图像本身移动。
想让背景图动起来，又不想用GIF或视频？用 background-position 配合 @keyframes 是个轻量又高效的方案。它适合做平滑滚动、视差滑动或无缝循环的动画效果，比如飘动的云、流动的河流或横向滚动的轨道。
1. 原理：移动背景位置
背景图像本身不会动，但可以通过改变 background-position 的值，让图像在容器内“位移”，从而产生动画感。结合 animation 属性，就能实现连续变化。
常见适用场景：
- 横向滚动的banner背景
- 垂直流动的光影或粒子
- 无缝拼接纹理的循环移动（如砖墙、网格）
2. 实现步骤
下面是一个横向滚动背景的完整例子：
立即学习“前端免费学习笔记（深入）”；
.animated-bg {
width: 100%;
height: 200px;
background-image: url('stripes.png'); /* 水平重复的条纹图 */
background-repeat: repeat-x; /* 横向重复 */
background-position: 0 0;
animation: slide-bg 10s linear infinite;
}
@keyframes slide-bg {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}说明：
- background-repeat: repeat-x 确保图像横向铺满
- animation 设置了10秒匀速无限循环
- 关键帧从左（0）移到右（100%），视觉上就是背景向左滚动
3. 提升效果的小技巧
让动画更自然或适配不同需求：
- 使用更大背景图：避免跳跃感，尤其是非无缝图
-
调整缓动函数：用
ease-in-out实现呼吸式移动 - 反向滚动：把 keyframes 的百分比反过来
-
垂直动画：改用
background-position: 0 100%控制Y轴 - 多层背景叠加：设置多个 background-image 并分别动画，做出视差
4. 注意事项
避免常见坑：
- 确保容器有明确宽高，否则看不到背景
- 图片尺寸太大可能影响性能，尤其移动端
- 非无缝图直接移动会露白，建议拼接或裁剪成可平铺
- 部分老浏览器需加前缀（-webkit-），但现在基本不用
基本上就这些。掌握 background-position + @keyframes 组合，就能轻松做出流畅的背景动画，不依赖额外资源，兼容性也好。关键是理解“不是图在动，是位置在变”。
