添加動畫的元素與活動狀態

Question

對於我的網絡任務，我已經給出了以下指示對網頁的特定部分：

有在打五個骰子。加載網頁時，必須爲每個骰子顯示一個三維圖像。 當點擊骰子時，它應該顯示一個滾動動畫，然後顯示一個特定的骰子面（滾動結果）。這個 值必須只在骰子被點擊（激活）時纔可見。作爲 例如，如果你點擊骰子，你可能會看到一個顯示5個 點子證明你「滾」骰子面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>