css 精灵图

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

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

 

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

css 精灵图

 

<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张图片合成

 

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

 

上一篇:java – 逐渐加速按下的精灵;钥匙释放逐渐减速


下一篇:csdn_export_md