Question

我几乎遍历了整个Spritesheet，没有问题。一切都统一。我找到了最后几个宽度不等的怪物，并遇到了能够看到它左边的怪物的问题。有没有办法隐藏溢出或我需要更改我的Spritesheet来解决不均匀性？

.monster {
  width: 90px;
  height: 90px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("https://cdn.discordapp.com/attachments/423540996098228245/494950824963866635/16x16.png");
}

.dragon {
  width: 113px;
  height: 90px;
  animation: dragon .8s steps(2) infinite;
}

@-webkit-keyframes dragon {
  from {
    background-position: -7885px;
  }
  to {
    background-position: -8115px;
  }
}

<div class="monster dragon"></div>

Answer 1

我将尺寸和位置放在“关键帧”本身中，因为它使您可以更好地控制动态图片。看下面的代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.monster {
  width: 90px;
  height: 90px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("https://cdn.discordapp.com/attachments/423540996098228245/494950824963866635/16x16.png");
}

.dragon {
  height: 90px;
  animation: dragon .8s steps(2) infinite;
}

@-webkit-keyframes dragon {
  from {
	  width: 93px;
    background-position: -7909px;
  }
  to {
	  width: 113px;
    background-position: -8115px;
  }
}
</style>
</head>
<body>

	<div class="monster dragon"></div>

</body>
</html>

当Sprite不一致时，如何使用CSS为Spritesheet制作动画？

1 个答案: