CSS3提供了許多有趣的特效，例如可以使用CSS3實現(xiàn)搖骰子的效果。接下來，我們來學(xué)習(xí)如何使用CSS3制作一個搖骰子的動畫效果。

/* 骰子的樣式 */
.dice {
position: relative;
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 5px;
text-align: center;
font-size: 30px;
font-weight: bold;
line-height: 50px;
}
/* 骰子的動畫效果 */
.dice.shake {
animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
}
/* 定義動畫關(guān)鍵幀 */
@keyframes shake {
0% {transform: rotate(0deg);}
10% {transform: rotate(-30deg);}
20% {transform: rotate(20deg);}
30% {transform: rotate(-20deg);}
40% {transform: rotate(10deg);}
50% {transform: rotate(-20deg);}
60% {transform: rotate(15deg);}
70% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}

可以看到，我們首先定義了一個骰子的樣式，包括寬度、高度、邊框、字體等基本屬性。接著，我們定義了骰子的搖動動畫，通過設(shè)置transform屬性來實現(xiàn)旋轉(zhuǎn)的效果。最后，我們使用animation屬性將動畫應(yīng)用到了骰子上面。

如果想讓該骰子產(chǎn)生搖動的效果，只需要給這個元素添加對應(yīng)的類名即可：

3

其他骰子的點數(shù)同理，只需要修改相應(yīng)的文本內(nèi)容即可。