css 精灵图

以前一直在想坐骑是怎么让人和宠物结合的，后面问了些大佬，发现是精灵图实现的，在此也尝试了下

精灵图：多张图片放入一张大图片，然后通过background-position这个属性去调整图片位置获得想要的图片，可以添加animation实现动画效果

 

以下是对以前玩的一个游戏做了个测试

 

<div class="sprite_img"></div>

<style>
    .sprite_img{
        width: 148px;
        height: 180px;
        background-image:url('/static/img1.png');
        animation: sprite 1s steps(4,end) infinite;
    }

    @keyframes sprite {
        0%{
            background-position: 0 0;
        }

        100%{
            background-position: -592px 0;
        }
    }
</style>

steps：逐帧动画，4张图片合成

 

以后有时间的话，可以玩下行走和战斗的精灵图。