今天要介紹的是，利用css製作星星閃爍的效果

HTML

<div class="night-sky">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
</div> 

• night-sky ： 代表整個夜空背景
• star ： 每個星星都是一個獨立的 div，方便為每顆星星設置不同的樣式和動畫

CSS

1. body基本樣式

設置為全屏深藍色背景，移除外邊距並隱藏滾動條

body {
   margin: 0;
   height: 100vh;
   overflow: hidden;
   background-color: #001133; 
}

• overflow : 隱藏可能出現的滾動條
• background-color : 設置深藍色背景，讓星星效果更為突出

2. 夜空容器

使用相對定位以便於星星等元素的絕對定位，確保其高度與頁面一致

.night-sky {
    position: relative;
    height: 100%;
}

3. 星星樣式

.star {
   position: absolute;
   background-color: white;
   border-radius: 50%;
   opacity: 0; 
   animation: blink 1.5s infinite; 
}

• position : 讓星星元素能夠自由定位在容器內的任何位置
• background-color : 設置星星的顏色為白色
• border-radius : 將星星設置為圓形
• opacity : 需要隱藏星星，所以初始透明度為 0
• animation : 為星星設置閃爍動畫，每 1.5 秒無限循環

4. 星星位置和大小

.star:nth-child(1) {
   top: 20%; left: 10%; width: 4px; height: 4px; animation-delay: 0s;
}
.star:nth-child(2) {
   top: 50%; left: 30%; width: 6px; height: 6px; animation-delay: 0.5s;
}
.star:nth-child(3) {
   top: 70%; left: 80%; width: 5px; height: 5px; animation-delay: 0.3s;
}
.star:nth-child(4) {
   top: 40%; left: 60%; width: 3px; height: 3px; animation-delay: 0.7s;
}
.star:nth-child(5) {
   top: 80%; left: 20%; width: 7px; height: 7px; animation-delay: 1s;
}
.star:nth-child(6) {
   top: 10%; left: 70%; width: 4px; height: 4px; animation-delay: 0.9s;
}
.star:nth-child(7) {
   top: 30%; left: 50%; width: 5px; height: 5px; animation-delay: 1.2s;
}
.star:nth-child(8) {
   top: 60%; left: 90%; width: 3px; height: 3px; animation-delay: 0.8s;
}
.star:nth-child(9) {
   top: 15%; left: 25%; width: 6px; height: 6px; animation-delay: 1.4s;
}
.star:nth-child(10) {
   top: 75%; left: 40%; width: 4px; height: 4px; animation-delay: 1.1s;
}

• :nth-child(1)：表示選取父容器中的第 1 個 .star 元素，並應用特定樣式
• top 和 left ： 設置星星在夜空中的位置，使用百分比來確保相對於容器的比例
• width 和 height ： 設置星星的大小
• animation-delay ： 設置動畫開始的延遲，讓每顆星星的閃爍時間不同，創造隨機感

5. 閃爍動畫

@keyframes blink {
    0%, 100% {
        opacity: 0; 
   }
   50% {
       opacity: 1; 
   }
}

• 0%, 100% ： 在動畫開始和結束時，透明度為 0（隱藏）
• 50% ： 在動畫的中間，透明度為 1（顯示）

結果呈現