CSS是前端開發中必不可少的一部分，可以用來美化頁面，實現交互效果等等。今天我們就來嘗試使用CSS來制作流星雨效果！

// 創建并定義animation動畫
@keyframes shooting-star {
0% {
opacity: 0;
transform: translateY(-200%) rotate(-45deg);
}
60%, 80% {
opacity: 1;
transform: translateY(0%) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(200%) rotate(45deg);
}
}
// 定義流星的樣式
.star {
width: 20px;
height: 2px;
background: #fff;
position: absolute;
pointer-events: none;
}
// 定義流星的起點和終點位置
.star.start-point {
top: -10px;    //流星出現位置
left: 20%;     //流星出現位置
}
.star.end-point {
top: 60%;     //流星消失位置
left: 80%;    //流星消失位置
}
// 把流星造型起點和終點位置連結成一條線
.star-span {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 50%, #fff 50%);
}
// 注：這里的transparent，表示顏色為空色，即網頁內容顯示的背景色。
// 為流星添加animation動畫
.star:before {
content: "";
display: block;
width: 10px;
height: 10px;
top: -5px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 5px #fff;
position: absolute;
animation: shooting-star 3s linear infinite;
transform: rotate(-45deg);
}

有了以上代碼的實現，我們就可以愉快的看著流星劃過天空，令人心曠神怡。CSS真是一個非常神奇的技能，不僅可以幫助我們實現很多想象不到的效果，而且還可以留下美好回憶！