CSS3 彗星尾巴是一種用于網(wǎng)頁設(shè)計(jì)中的特效效果，為頁面呈現(xiàn)出流星劃過的效果。

.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 0px 20px #fff;
width: 10px;
height: 10px;
transform: rotate(45deg);
animation: star-fall 4s ease-in-out infinite;
}
@keyframes star-fall {
0% {
top: -200px;
left: 50%;
transform: rotate(45deg);
opacity: 1;
box-shadow: 0px 0px 20px #fff;
}
25% {
top: 0;
left: 55%;
transform: rotate(60deg);
opacity: 1;
box-shadow: 0px 0px 20px #fff;
}
50% {
top: 200px;
left: 60%;
transform: rotate(45deg);
opacity: 0.7;
box-shadow: 0px 0px 20px #fff;
}
75% {
top: 400px;
left: 65%;
transform: rotate(30deg);
opacity: 0.4;
box-shadow: 0px 0px 20px #fff;
}
100% {
top: 600px;
left: 70%;
transform: rotate(45deg);
opacity: 0;
box-shadow: 0px 0px 20px #fff;
}
}

使用CSS3 彗星尾巴可以讓頁面更加生動，吸引用戶的注意力，增強(qiáng)用戶體驗(yàn)。要制作彗星尾巴效果，只需要簡單地使用CSS的動畫效果，無需使用復(fù)雜的JS代碼。