我们在做项目时难免要用图标的图片，而图片用多则会影响打开网页的加载速度，如果能把多个图标集合到一张图片上，再用css的样式显示你所需要的图片，那么加载速度自然就加快了，同时也提高了用户的体验度
过程如下
這样的一张图
实现下面的效果，便以移动的方式来展现
代码如下
b标签中给背景图
css样式
#img-a {
animation: img-a 1s linear;
animation-fill-mode:forwards;
}
#img-a b {
}
#img-b {
position: absolute;
left: 107px;
animation: img-b 1s linear;
animation-fill-mode:forwards;
}
#img-b b {
background-position: -174px;
}
#img-c {
position: absolute;
left: 210px;
animation: img-c 1s linear;
animation-fill-mode:forwards;
}
#img-c b {
background-position: -348px;
}
#img-d {
position: absolute;
left: 300px;
animation: img-d 1s linear;
animation-fill-mode:forwards;
}
#img-d b {
background-position: -522px;
}
#img-e {
position: absolute;
left: 400px;
animation: img-e 1s linear;
animation-fill-mode:forwards;
}
#img-e b {
background-position: -697px;
}
這样就实现了