在網頁設計中，如何使用CSS3動畫來吸引用戶的注意力呢？金幣動畫是一個非常實用的效果，下面我們來看一下如何通過CSS3實現一個金幣飛舞的動畫。

/* 定義金幣圖片 */
.gold {
background: url('gold.png') no-repeat;
background-size: contain;
width: 50px;
height: 50px;
position: absolute;
}
/* 定義金幣飛舞動畫 */
@keyframes gold-reward {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5) translate(-20px,-20px);
opacity: 1;
}
100% {
transform: scale(1) translate(0,0);
opacity: 0;
}
}
/* 定義金幣飛舞的關鍵樣式 */
.gold-reward {
animation: gold-reward 1s ease-in-out;
transform-origin: 50% 50%;
}
/* 在HTML中添加金幣元素 */

代碼解析：

首先需要定義金幣圖片及其樣式，這里使用了一個gold類名稱。接下來，通過@keyframes來定義金幣飛舞的動畫效果，包括金幣縮小、向左上角偏移一定距離再放大的過程。最后在.gold-reward樣式中，調用動畫效果，并設定了transform-origin屬性。

在HTML中，使用class為gold和gold-reward的div元素分別添加了四枚金幣。這些元素將應用我們剛剛定義的樣式，并在頁面加載時自動執行動畫效果。

通過使用CSS3動畫制作金幣效果，可以使網頁更加動態和生動，增強用戶體驗，提高頁面效果。希望這篇文章能夠對大家有所幫助。