以前一直在想坐骑是怎么让人和宠物结合的,后面问了些大佬,发现是精灵图实现的,在此也尝试了下
精灵图:多张图片放入一张大图片,然后通过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张图片合成
以后有时间的话,可以玩下行走和战斗的精灵图。