Как я могу анимировать таблицу спрайтов с помощью CSS, когда спрайты не однородны? - PullRequest
Новая
       0

Как я могу анимировать таблицу спрайтов с помощью CSS, когда спрайты не однородны?

0 голосов
/ 05 октября 2018

Я прошел почти всю мою таблицу спрайтов без проблем.Все было одинаково.Я добрался до последних нескольких монстров различной ширины и столкнулся с проблемой возможности увидеть монстра слева от него.Есть ли способ скрыть переполнение или мне нужно изменить мою таблицу спрайтов для учета неравномерности?

.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>

1 Ответ

0 голосов
/ 05 октября 2018

Я бы поместил размер и положение в «ключевые кадры», потому что это позволяет вам лучше контролировать динамическое изображение.посмотрите на следующий код: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...