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技能。尝试一下，你会发现它不仅很有趣，而且非常实用，可以在很多网页设计中使用。