CSS 是網頁設計中非常重要的一部分，不僅可以美化頁面，還能實現各種動畫效果。今天我將介紹如何使用 CSS 制作一個動態的流星雨。

/* 定義流星的關鍵幀動畫 */
@keyframes shooting-star {
0% {
opacity: 0;
transform: translateX(0) translateY(0);
}
20% {
opacity: 1;
transform: translateX(50px) translateY(20px);
}
100% {
opacity: 0;
transform: translateX(100px) translateY(50px);
}
}
/* 定義流星的樣式 */
.star {
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
position: absolute;
}
/* 定義流星雨的容器 */
.star-rain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
/* 循環創建流星 */
@for $i from 1 through 20 {
.star:nth-child(#{$i}) {
animation: shooting-star #{random(10) + 5}s linear infinite;
top: #{random(100)}%;
left: #{random(100)}%;
z-index: 1;
}
}
/* 隨機函數 */
@function random($limit) {
@return ceil(rand() * $limit);
}

以上是 CSS 的代碼實現部分。我們首先定義了一個關鍵幀動畫「shooting-star」，表示流星的運動軌跡；然后定義了「star」類，用來表示單個流星的樣式；最后是「star-rain」類，表示整個流星雨容器的樣式。

我們使用 SCSS 的循環語句和隨機函數，循環創建 20 個流星。設置每個流星的樣式，包括隨機的位置和隨機的動畫時間。

這樣，一個動態的流星雨就完成了。在 HTML 中引入 CSS，添加流星雨容器的代碼即可。如下：

<div class="star-rain">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<!-- 省略 17 個 .star -->
<div class="star"></div>
</div>

這里只創建了 20 個流星，如果需要更多，可以在 SCSS 中修改循環的次數。

通過這個例子，我們可以看到 CSS 的強大之處，不僅可以美化頁面，還能實現我們想要的各種動畫效果。