CSS3飛機(jī)飛起來，是一種非常神奇的效果，它讓網(wǎng)頁看起來更加生動、有趣、夸張。那么，如何實(shí)現(xiàn)這種效果呢？下面，在我的幫助下，你將可以輕松實(shí)現(xiàn)這個(gè)效果。

/*定義主體樣式*/
#airplane {
width: 80px;
height: 80px;
background: url(images/airplane.png) no-repeat;
position: fixed;
left: -50px;
top: 50%;
transform: translateY(-50%);
transition: all 5s cubic-bezier(.5, -0.5, .5, 1.5);
animation: airplane 5s infinite linear;
}
/*定義關(guān)鍵幀動畫*/
@keyframes airplane {
0% {
left: -50px;
transform: translateY(-50%);
}
100% {
left: 100%;
transform: translateY(-50%) rotateZ(720deg);
opacity: 0;
}
}

首先，我們要定義主體樣式，包括高、寬、背景圖片等。其中有幾個(gè)關(guān)鍵屬性，需要解釋一下。position: fixed; 是固定定位，讓飛機(jī)在瀏覽器中固定位置不動。left: -50px; 是飛機(jī)的初始位置，通常是瀏覽器可視區(qū)域之外。transform: translateY(-50%); 是垂直居中的方法。transition: all 5s cubic-bezier(.5, -0.5, .5, 1.5); 是過渡效果，讓飛機(jī)移動時(shí)更加平滑、自然。 animation: airplane 5s infinite linear; 是動畫效果，這里我們使用了關(guān)鍵幀動畫。

然后，我們需要定義關(guān)鍵幀動畫。在這里，我們使用了@keyframes 來定義關(guān)鍵幀。它包括兩個(gè)百分比，分別是0%和100%。在0%的時(shí)候，飛機(jī)的left屬性是-50px，transform屬性是translateY(-50%)。也就是說，飛機(jī)在起飛前，先在屏幕左邊隱藏起來。在100%的時(shí)候，飛機(jī)的left屬性是100%（也就是飛到屏幕最右邊），transform屬性是translateY(-50%) rotateZ(720deg)。也就是說，飛機(jī)在飛過去的同時(shí)，還會旋轉(zhuǎn)，然后在飛出屏幕之前消失。