CSS 可以幫助我們將網頁元素設計得更加炫酷、美觀。在這篇文章中，我們會展示如何使用 CSS 創造一個飛機效果。

/* 首先我們定義一個飛機容器 */
.airplane {
position: absolute;
width: 150px;
height: 50px;
left: -150px;
top: 50%;
transform: translateY(-50%);
}
/* 添加飛機機身 */
.airplane-body {
position: absolute;
width: 100px;
height: 50px;
background-color: #fff;
border: 2px solid #000;
border-radius: 5px;
}
/* 添加飛機引擎 */
.airplane-engine {
position: absolute;
width: 30px;
height: 50px;
right: 0;
top: -2px;
background-color: #cc3333;
border: 2px solid #000;
border-radius: 5px;
}
/* 添加飛機機翼 */
.airplane-wing {
position: absolute;
width: 60px;
height: 5px;
background-color: #ccc;
right: -5px;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
/* 添加飛機尾翼 */
.airplane-tail {
position: absolute;
width: 30px;
height: 30px;
background-color: #fff;
border: 2px solid #000;
border-radius: 5px;
transform: rotate(-30deg);
right: -50px;
top: 5px;
}
/* 最后添加動畫效果 */
@keyframes airplane-fly {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200%);
}
}
.airplane {
animation: airplane-fly 5s linear infinite;
}

上面的代碼講得很清楚，你可以嘗試復制到你的項目里，然后為飛機添加細節，比如窗戶等。

好了，本文就到此結束，希望你學到一些新的 CSS 技巧，可以用它來創造你自己的炫酷效果。