「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」
我不喜欢胖子，但她胖就没事
今天我们来制作雪碧图（就是将很多小图标放在一张图片中）然后通过动画效果让其运动起来，看起来就像是物体在运动。
一.利用雪碧图有很多优点 :
1.可以减小图片的总大小
2.一次请求，可减小建立键连接的消耗
在这里我们来做一个运动的小人
就是将小人的多个动作放在一张图片上，然后利用css动画效果让其运动起来，就能呈现出小人再跑的效果，即也是雪碧图。
1.html代码
<body><div class="box1"></div></body>
首先编写HTML代码，创建一个容器，让图片呈现在容器中，为了让效果更好，我们索性直接将容器大小设置和图片大小一样，（这里的尺寸根据个人需要来设置）下面写css代码
2.css代码
.box1{
width: 55px;
height: 92px;
background-image: url('./少年.png');
}
这里我们将图片设置为容器的背景，然后后面添加css效果来时图片背景运动起来(图片地址需修改)
3.让小人动起来
到这里做好了以上工作就只剩让小人动起来了，需要使用css的动画效果。 如下代码：
@keyframes test{
from{
background-position: 0 0;
}
to{
background-position: -460px 0;
}
}
这里form代表图片的起始位置，同to代表最终位置。其中里面的参数需要我们测量图片中一个小人占据的像素。我们通过改变图片的位置来使小人运动起来。看似在动实际上是使图片运动。
4.引用@keyframes test
当然我们设置好了动画效果下面就是引用这个动画效果，下面我们将此动画效果引用到css代码中 如下:
animation: test 0.3s forwards infinite steps(7);
运动速度0.3s
forwards :当动画完成后，保持最后一帧的状态（也就是最后一个关键帧中定义的状态）
infinite :控制运动循环播放
step（）:设置跳动次数(这里小人分了7个动作，所以分为七次播放)
下面将代码运行就可以看到效果了，当然我们也可以换成其他的图片活的更惊艳的效果
怎么样是不是很简单呢！快动手试试吧！
