CSS 是前端網頁開發中不可或缺的一環，而且具有無上的魅力。今天我們來講一下如何用 CSS 制作一個簡單的飛機。

首先，我們需要在頁面中添加一個 div 元素，并給它添加一個 class 名稱為 plane，這個 div 元素將作為我們飛機的主體。

<div class="plane"></div>

接下來，我們需要使用 CSS 技巧來讓這個 div 元素成為一個飛機。

.plane {
width: 100px;
height: 50px;
position: relative;
background-color: #888;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
transform: rotate(-30deg);
box-shadow: 0 0 10px #ccc;
}

在這里，我們為飛機主體設置了一個鼻翼，把盒子變為了斜45度，同時讓它帶上一些小陰影。

然后，我們為飛機添加一對翅膀，借助偽類 :before 和 :after 來實現：

.plane:before,
.plane:after {
content: '';
position: absolute;
top: 0;
width: 0;
height: 0;
}
.plane:before {
left: -20px;
border-top: 25px solid transparent;
border-right: 35px solid #888;
border-bottom: 30px solid transparent;
}
.plane:after {
right: -20px;
border-top: 25px solid transparent;
border-left: 35px solid #888;
border-bottom: 30px solid transparent;
}

在這里，我們使用 CSS 邊框技巧來為飛機添加了一對翅膀。我們為元素添加了兩個偽類，一個 before，一個 after，然后設置他們的具體樣式。

最后，我們再來為飛機添加一個小尾巴，并調整下飛機的位置：

.plane:before {
// ...
border-bottom-left-radius: 25px;
transform: rotate(65deg);
}
.plane:after {
// ...
border-bottom-right-radius: 25px;
transform: rotate(-65deg);
}
.plane:after,
.plane:before {
z-index: -1;
}
.plane {
left: 20%;
top: 30%;
}

這里我們為兩個偽類加上了一些曲線，使飛機的翼果更為逼真。我們還將偽類的 z-index 指定為 -1，讓它在飛機主體下方，營造出層次感。最后，調整下飛機的位置和姿態。

這樣，一個簡單的 CSS 動畫飛機就完成了。運行看看吧！