CSS動(dòng)畫越來越流行，可以讓網(wǎng)頁更有趣味性，吸引用戶留下更長的時(shí)間。今天我們來一起學(xué)習(xí)如何使用CSS動(dòng)畫來制作一個(gè)金幣效果。

/*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代碼結(jié)束*/

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

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

這個(gè)金幣效果可以用在抽獎(jiǎng)、打賞等場(chǎng)景中，做為獎(jiǎng)勵(lì)的效果更是不錯(cuò)。希望大家能夠?qū)W習(xí)并使用這個(gè)動(dòng)畫效果，讓自己的網(wǎng)頁更加生動(dòng)有趣！