将动画添加到具有活动状态的元素
将动画添加到具有活动状态的元素
提问于 2015-11-18 19:30:19
在我的网络作业中，我得到了关于网页特定部分的以下说明：
有五个骰子在玩。当网页加载时，必须为每个骰子显示一个三维图像.单击骰子时，它应该显示滚动动画，然后显示特定的骰子面(滚动结果)。此值只能在单击骰子时才可见(活动)。举个例子，如果你点击骰子，你可能会看到一个骰子脸显示5个点，显示你“滚”了一个5。
当动画处于活动状态时，我不确定如何将动画作为图像的一部分。到目前为止，这是我页面的一张照片。骰子必须显示动画。
骰子游戏
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-18 20:02:36
您还可以将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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33788720
复制相关文章
相似问题
腾讯云开发者
