最近我們看到了很多網(wǎng)站上都出現(xiàn)了星軌特效，這種特效可以讓網(wǎng)站看起來非常炫酷。其實這種特效就是用CSS來實現(xiàn)的，下面我們來看一下如何使用CSS制作出這樣的特效。

.star {
position: absolute;
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
animation: twinkle 1s linear infinite;
}
@keyframes twinkle {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

這是一段CSS代碼，我們使用了一個名為.star的class來給它設(shè)置樣式，其中它的position為absolute，這是因為我們需要讓它浮動在頁面上。接著我們設(shè)置它的寬高為5px，同時讓它的背景為白色，設(shè)置它的圓角為50%以便讓它看起來更圓潤一些。

這段代碼的關(guān)鍵點是animation屬性，在動畫里我們定義了一個名稱為twinkle的關(guān)鍵幀，然后將它用于.star這個class里。twinkle動畫是在1秒內(nèi)逐漸讓opacity從1變?yōu)?，這樣就能讓星星看起來閃爍的感覺。

如果你想要讓頁面上出現(xiàn)多顆星星，可以使用JS來動態(tài)生成它們，并將它們添加進(jìn)HTML頁面中。另外，為了讓星星看起來更流暢，你也可以使用貝塞爾曲線來讓它們移動的路徑更加自然。

總體而言，制作這種星軌特效的核心思路在于使用CSS動畫來讓星星閃爍，并使用JS來動態(tài)生成星星。如果你想要讓頁面更加炫酷，那么這種特效一定會是一個很不錯的選擇。