夜晚的星空總是令人神往，而在網站中加入流星特效，更能吸引用戶的視線。下面我們就來學習如何使用CSS制作夜空流星特效。

.star {
width: 1px;
height: 1px;
background: #fff;
box-shadow: 0 0 5px 1px #fff;
border-radius: 50%;
position: absolute;
animation-name: twinkle;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes twinkle {
0% {
opacity: 0;
transform: scale(0.1);
}
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.1);
}
}
.meteor {
position: absolute;
width: 2px;
height: 50px;
background: linear-gradient(to bottom, #fff, transparent);
box-shadow: 0 0 10px #fff;
animation-name: meteor;
animation-timing-function: linear;
animation-duration: 1.5s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes meteor {
0% {
top: -50px;
left: 200px;
opacity: 0;
}
100% {
top: 1200px;
left: -300px;
opacity: 1;
}
}

首先，我們需要定義星星的樣式。通過設置寬度、高度、背景、陰影和圓角等屬性，我們可以制作一個閃閃發光的星星。使用animation屬性，并定義名為twinkle的動畫，控制星星在3秒內漸隱漸顯，并不斷重復播放。

接下來，我們需要定義流星的樣式，使用線性漸變背景制作流星的形狀。定義名為meteor的動畫，控制流星從右上方開始運動，并在1.5秒內飛行到左下角。設置animation-delay屬性，使流星的出現時間錯開。

最后，在HTML中插入使用上述CSS樣式定義的星星、流星元素即可。通過合理的定位等操作，讓這些元素在頁面中飛舞，制作出動態、生動的夜空流星特效，為用戶帶來更好的用戶體驗。