CSS動畫越來越流行，可以讓網頁更有趣味性，吸引用戶留下更長的時間。今天我們來一起學習如何使用CSS動畫來制作一個金幣效果。

/*CSS代碼開始*/
.golden {
width: 30px;
height: 30px;
background: url(../images/golden.png) no-repeat center;
background-size: cover;
animation: rotate 1s linear infinite, updown 1s ease-in-out infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes updown {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
/*CSS代碼結束*/

首先，我們需要準備一個金幣圖片，并設置元素的背景為該圖片，這里我使用了golden.png。接著，我們定義了兩個動畫，一個是rotate，表示元素按順時針方向連續旋轉360度，即360度的動畫；另一個是updown，表示元素在動畫中向上下移動一定距離，即動畫的來回移動。

最后，在需要展示金幣效果的元素上加上golden類名，就可以帶上動畫效果了。代碼中的golden類名定義了元素的大小和背景圖像，同時應用了兩個動畫，即使沒有為該元素指定位置，金幣效果也可以通過動畫展示出來。

這個金幣效果可以用在抽獎、打賞等場景中，做為獎勵的效果更是不錯。希望大家能夠學習并使用這個動畫效果，讓自己的網頁更加生動有趣！