效果图：
背景图是自己另外找的，北极熊在奔跑的同时，背景图也在向它身后移动。
素材：
实现思路：
1 先定义一个盒子来“装”北极熊，因为素材是 1600 x 100 px，包含8张北极熊动作图，所以盒子的宽高定为 200 x 100px，这样一来盒子每次只会显示“一只”北极熊了。
2 然后把北极熊素材作为上述盒子的背景图，然后配合animation动画，通过修改该盒子的 background-position，来控制北极熊素材图的移动，然后我们看到展示出来的效果就会是北极熊的移动。
3 同理，也可以给背景设置一个类似的盒子，来控制背景图的移动。
4 盒子的嵌套关系为 body>背景图div>北极熊div
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>* {margin: 0;padding: 0;}body>div {position: relative;width: 100%;height: 1000px;background: url("../../网页素材/建筑背景图.jpg") no-repeat;animation: background_move 15s linear infinite;}body>div>div {position: absolute;width: 200px;height: 100px;margin: 600px 0;background: url("../images/bear.png") no-repeat;animation: bear 1s steps(8) infinite, move forwards 3s;}@keyframes bear {0% {}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;transform: translateX(-50%);}}@keyframes background_move {0% {}100% {background-position: -2000px 0;}}</style><title>Document</title></head><body><div><div></div></div></body></html>
