CSS3翅膀扇動效果是一個非常酷炫的功能，它可以讓網頁上的圖像看起來像是在飛翔。下面我們就來學習一下如何使用CSS3來實現這一效果。

.wing {
position: relative;
height: 50px;
width: 50px;
background: url(wing.png) no-repeat;
background-size: 100%;
animation: flap 0.5s ease-in-out alternate infinite;
}
@keyframes flap {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(20deg);
}
}

首先，我們需要創建一個容器來顯示翅膀。我們可以使用DIV元素，然后為它設置合適的高度和寬度。接下來，我們需要設置翅膀的背景圖像，這里我們將使用一張名為wing.png的圖像。

接下來，我們需要使用動畫功能來使翅膀扇動起來。我們通過指定@keyframes規則集來定義一個名為“flap”的動畫。此動畫會從0%開始，然后在100%時結束。在動畫開始時，我們使用transform屬性將圖片的旋轉角度設置為0度，而在結束時，則將其設置為20度。

最后，我們將動畫應用到容器上，讓翅膀扇動起來！我們設置animation屬性在半秒鐘內進行動畫，并且使用ease-in-out來使動畫更平滑。我們還指定了alternate參數，這意味著在動畫結束時，它會逆轉方向。最后，我們設置infinite參數，讓動畫永遠重復。

創建翅膀扇動效果是一個不錯的練習，它可以增加你的CSS3技能。嘗試一下，你會發現它不僅很有趣，而且非常實用，可以在很多網頁設計中使用。