在我們學習了 CSS 的基本知識后，我們來挑戰一個有點難度的小程序，那就是制作一個會飛的蝴蝶。

.butterfly {
width: 120px;
height: 80px;
position: absolute;
background-image: url('蝴蝶圖片的 URL 地址');
animation: fly 4s ease-out infinite;
}
@keyframes fly {
0% {
bottom: 100px;
transform: rotateZ(0deg);
}
50% {
bottom: 300px;
transform: rotateZ(20deg);
}
100% {
bottom: 100px;
transform: rotateZ(0deg);
}
}

我們首先給蝴蝶設置寬高、定位屬性，然后設置蝴蝶的背景圖片。接著，我們使用 CSS3 動畫屬性 animation，讓蝴蝶實現飛翔的效果。

在 keyframes 中，我們設置動畫的三個狀態，即開始、中間和結束狀態。在開始狀態下，蝴蝶位于底部，翅膀角度為 0 度；在中間狀態下，蝴蝶飛至頂部，并旋轉了 20 度；在結束狀態下，蝴蝶返回底部，翅膀角度恢復為 0 度。

通過細致的調整，就可以讓蝴蝶在頁面中優美地飛翔了。