Question

对于我的网络作业，我已经获得了网页特定部分的以下说明：

有五个骰子在玩耍。加载网页时，a 必须为每个骰子显示三维图像。单击骰子时，它应显示滚动动画和然后它显示一个特定的骰子面（滚动的结果）。这个只有在单击骰子（活动）时才能看到值。作为一个例如，如果你点击骰子，你可能会看到一个显示5的骰子脸 pips表明你“滚动”了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>

将动画添加到具有活动状态的元素

1 个答案: