html - 向具有事件状态的元素添加动画

Question

对于我的网络作业，我得到了针对网页特定部分的以下说明:

There are five dice in play. When the webpage is loaded, a three-dimensional image must be displayed for each dice. When the dice is clicked, it should display a rolling animation and then it shows a particular dice face (the results of the roll). This value must only be visible when the dice is clicked (active). As an example if you clicked on the dice you might see a dice face showing 5 pips demonstrating that you “rolled” a 5.

我不确定当动画处于事件状态时如何将动画作为图像的一部分。到目前为止，这是我的页面的照片。骰子必须显示动画。

dice game

Answer 1

您还可以将 GIF 图像设置为背景图像以添加动画。 但这里有一个有效的 CSS 动画示例:

.dices {
  width: 204px;
  height: 120px;
  border: 1px solid black;
  list-style: none;
  padding: 0px 10px;
}

.dice {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: black;
  margin: 20px 10px;
  transition: background 1s;
  transition: transform 2s;
  -webkit-transition: -webkit-transform 2s;
}

.dice:active {
  background: yellow;
  transform: rotate(720deg);
  -webkit-transform: rotate(720deg);
}

<ul class="dices">
  <li class="dice"></li>
  <li class="dice"></li>
</ul>