CSS3是一種非常有用的技術，它可以幫助我們實現各種各樣的特效和效果。其中，星空特效是一種非常有趣的效果，可以讓網頁變得更加生動和有趣。今天，我們就來學習一下如何使用CSS3來實現星空特效。

/*添加背景*/
body{
background: linear-gradient(to bottom, #232526, #414345);
}
/*定義星星*/
.star {
position: absolute;
border-radius: 50%;
transform: rotate(45deg);
}
/* 定義星星閃爍動畫 */
.twinkle {
animation: twinkle 3s ease infinite;
}
/* 定義星星閃爍動畫的關鍵幀 */
@keyframes twinkle {
0% {opacity: 1;}
50% {opacity: 0.2;}
100% {opacity: 1;}
}
/* 繪制星星的形狀 */
.star::before, .star::after {
content: "";
position: absolute;
z-index: 1;
}
/* 繪制星星的內部 */
.star::before {
top: -25%;
left: -25%;
width: 150%;
height: 150%;
background: rgba(255, 255, 255, 0.8);
border-radius: 15%;
}
/* 繪制星星的外部 */
.star::after {
top: -75%;
left: -75%;
width: 400%;
height: 400%;
background: white;
border-radius: 50%;
box-shadow: 0 0 2px white, 0 0 4px white, 0 0 6px white, 0 0 8px white;
}
/* 使用JS動態生成星星 */
function createStar() {
const star = document.createElement('div');
star.classList.add('star');
star.classList.add('twinkle');
const xy = getRandomPosition();
star.style.top = xy[0] + 'px';
star.style.left = xy[1] + 'px';
document.body.appendChild(star);
setTimeout(() =>star.remove(), 5000);
}
/* 計算星星的隨機位置 */
function getRandomPosition() {
const x = window.innerWidth * Math.random();
const y = window.innerHeight * Math.random();
return [y, x];
}
/* 定時生成星星 */
setInterval(() =>createStar(), 100);

通過以上代碼，我們實現了星空特效的絕大部分，并可以使用JS動態生成和刪除星星元素。這讓我們的頁面變得更加有趣和生動。CSS3技術的強大，使得我們無限炫酷的效果在實現上也變得更加簡單。相信通過不斷探索和嘗試，我們可以實現更加令人印象深刻的網頁效果。