本期带大家制作百度浏览器官网（目前官网已经注销）中奔跑的北极熊的动画效果。
动画原理
奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起，形成一张背景图片，然后设置一个盒子，将背景图片放入，通过设置
animation-timing-function: steps();
盒子不动，让背景图片以片段为单位移动，当速度达到足够快时，就感觉北极熊正在奔跑。
背景图片
首先准备一张背景图片，当作北极熊奔跑的背景，不设置背景图片也可以，但要设置背景颜色，方便观看北极熊奔跑动画。本案例用的背景图片是雪山背景图片。
雪山背景图片
北极熊奔跑的片段拼接图
代码实现
1、搭建HTML结构
box为整体的大盒子，里面的img用于存放雪山背景图片，bear盒子用于展示北极熊奔跑动画。
<body><div class="box"><img src="image/bg1.png" alt="" class="bg1"><div class="bear"></div></div></body>
设置背景盒子box，设置position: relative;相对定位是方便对bear盒子以及雪山背景图片进行定位。设置overflow: hidden;可以让超出盒子的图片隐藏起来。
2、CSS3对盒子进行修饰
.box {position: relative;overflow: hidden;width: 1300px;height: 600px;margin: 0 auto;background-color: #3b3d4b;}
将雪山背景图片放到box盒子的底部位置，因为原雪山背景图较大，因此我们需要对雪山背景图的高度进行修改，高度与宽度只需修改一个，另一个参数会等比例变化。
.bg1 {position: absolute;bottom: 0;height: 249px;}
将bear盒子放置于box盒子的中部偏下区域，并将北极熊图片当作bear的背景图片插入。
因为北极熊图片为1600x100像素，一共有八个北极熊奔跑片段，因此我们的盒子应该设置为200x100像素，这样盒子每次只会展示一个北极熊片段。
.bear {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 200px;height: 100px;background: url(image/bear.png) no-repeat;/* animation: run .6s steps(8) infinite; */}
3、设置动画
初始位置为第一个北极熊片段，最后位置为最后一个北极熊片段，北因此整个过程北极熊背景y轴没有移动，只有x轴移动了1600像素的距离。
@keyframes run {0% {}100% {background-position: -1600px 0;}}
4、引用动画
定义动画之后，需要在bear盒子中引用动画，因为北极熊片段一共为8个，因此将steps设置成8
animation: run .6s steps(8) infinite;
这样我们就完成了在雪地里奔跑的北极熊的动画效果。
5、完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>奔跑的北极熊</title><style>.box {position: relative;overflow: hidden;width: 1300px;height: 600px;margin: 0 auto;background-color: #3b3d4b;}.bg1 {position: absolute;bottom: 0;height: 249px;}.bear {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 200px;height: 100px;background: url(image/bear.png) no-repeat;animation: run .6s steps(8) infinite;}@keyframes run {0% {}100% {background-position: -1600px 0;}}</style></head><body><div class="box"><img src="image/bg1.png" alt="" class="bg1"><div class="bear"></div></div></body></html>
