CSS3是前端開發中必不可少的一部分，其強大的動畫特效能夠讓網站變得更加生動有趣。本文將介紹如何使用CSS3制作直播送禮物動畫效果。

首先，我們需要先了解一下送禮物的基本流程。當用戶在直播間中送出一個禮物時，需要將禮物的圖片顯示在屏幕上，并且有一個數量的數字飛入屏幕并向上移動。因此，我們可以根據這個思路來進行制作。

/* 禮物圖片樣式 */
.gift-img {
position: absolute; /* 定位 */
width: 80px; /* 寬度 */
height: 80px; /* 高度 */
top: 50%; /* 上下居中 */
left: 50%; /* 左右居中 */
transform: translate(-50%, -50%); /* 居中 */
animation: gift-move 2s ease-out forwards; /* 動畫效果 */
}
/* 數字樣式 */
.num {
position: absolute; /* 定位 */
font-size: 24px; /* 字號 */
color: white; /* 顏色 */
top: 50%; /* 上下居中 */
right: 10px; /* 右側距離 */
transform: translateY(-50%); /* 上下居中 */
animation: num-move 2s ease-out forwards; /* 動畫效果 */
}
/* 禮物圖片動畫 Keyframes */
@keyframes gift-move {
0% {
transform: translate(-50%, -50%) scale(0.5); /* 開始動畫，圖片大小0.5 */
opacity: 1; /* 不透明度為1 */
}
50% {
transform: translate(-50%, -50%) scale(1.2); /* 圖片放大到1.2倍 */
opacity: 0.8; /* 不透明度為0.8 */
}
100% {
transform: translate(-50%, -50%) scale(1); /* 圖片回到原大小 */
opacity: 0; /* 不透明度為0，即完全透明 */
}
}
/* 數字動畫 Keyframes */
@keyframes num-move {
0% {
top: 50%; /* 開始動畫，數字居中 */
opacity: 1; /* 不透明度為1 */
}
100% {
top: 20px; /* 數字飛上去的位置 */
opacity: 0; /* 不透明度為0，即完全透明 */
}
}

以上是送禮物動畫的完整代碼，我們可以將其應用于直播間中的禮物動畫效果，使其變得更加生動有趣。