在前端的開發中，我們常常需要給網頁添加一些動態特效來增強用戶的交互體驗。其中，一個非常常見的效果就是模擬金幣下掉的動態效果。今天，我們就來學習一下如何使用CSS來實現這一效果。

/* 定義金幣掉落的關鍵幀動畫 */
@keyframes coin-falling {
0% {
top: -20px;
}
100% {
top: 500px;
}
}
/* 定義金幣旋轉的關鍵幀動畫 */
@keyframes coin-spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
/* 定義金幣的樣式 */
.coin {
position: absolute;
top: -20px;
left: 50%;
width: 30px;
height: 30px;
margin-left: -15px;
background-image: url('coin.png');
background-size: cover;
animation-name: coin-falling, coin-spin;
animation-duration: 2s, 1s;
animation-timing-function: ease-in-out, linear;
animation-iteration-count: infinite;
}
/* 在 HTML 中添加金幣元素 */

上面的代碼中，我們先定義了兩個關鍵幀動畫，分別用于控制金幣的下落和旋轉效果。然后，我們定義了一個樣式類 .coin，用于設置金幣的位置、大小、背景圖片和動畫效果。在 HTML 中，我們可以通過添加多個 .coin 元素來創建多個金幣，從而模擬金幣下落的效果。

需要注意的是，我們使用了 animation-iteration-count: infinite 屬性，將金幣的動畫次數設置為無限循環，這樣才能讓金幣一直處于下落狀態。另外，我們還可以通過調整 animation-duration 和 animation-timing-function 屬性，來控制金幣的下落速度和下落的插值動畫效果。