如果你是一個網頁設計師，你肯定聽說過CSS飛船效果。這是一種通過CSS動畫來模擬一艘飛船飛行的效果，讓你的網頁看起來更加驚艷。而今天，我們將探討的是如何將CSS飛船效果與一個星球進入動畫相結合，創造出一個有趣而引人注目的效果。

/* CSS代碼 */
/* 定義飛船的基本樣式 */
#spaceship {
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
animation: flight 3s ease-in-out infinite;
}
/* 通過keyframes定義飛船的飛行路徑 */
@keyframes flight {
0% {
top: -50px;
transform: translateX(-50%);
}
25% {
top: calc(25vh - 50px);
transform: translateX(calc(-50% + 25vw));
}
50% {
top: calc(50vh - 50px);
transform: translateX(calc(-50% + 50vw));
}
75% {
top: calc(75vh - 50px);
transform: translateX(calc(-50% + 75vw));
}
100% {
top: calc(100vh - 50px);
transform: translateX(-50%);
}
}
/* 定義星球的基本樣式 */
#planet {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: absolute;
top: calc(100vh + 200px);
left: 50%;
transform: translateX(-50%);
}
/* 通過keyframes定義星球的進入路徑 */
@keyframes enter {
0% {
top: calc(100vh + 200px);
transform: translateX(-50%);
}
50% {
top: calc(25vh - 100px);
transform: translateX(calc(-50% + 25vw));
}
100% {
top: calc(50vh - 100px);
transform: translateX(-50%);
}
}

以上代碼為我們定義了一個白色的飛船和一個藍色的星球。通過CSS動畫，我們定義了飛船飛行的路徑以及星球進入的路徑。接下來，我們需要將這兩個動畫結合起來，實現CSS飛船進入星球的效果。

/* CSS代碼 */
/* 引入enter和flight動畫 */
#spaceship, #planet {
animation-fill-mode: both;
}
/* 等到flight動畫完成后，執行enter動畫 */
#spaceship {
animation-delay: 3s;
animation-name: enter;
}

通過以上代碼，我們將飛船和星球的動畫綁定在一起，實現了CSS飛船進入星球的有趣效果。