在CSS中創(chuàng)建星空效果并添加星星，可以通過(guò)一些簡(jiǎn)單的CSS樣式和HTML結(jié)構(gòu)來(lái)實(shí)現(xiàn)，下面是一個(gè)基本的示例，展示了如何創(chuàng)建一個(gè)包含星星的星空背景。

1. HTML結(jié)構(gòu)

我們需要一個(gè)HTML元素來(lái)承載星空和星星，可以創(chuàng)建一個(gè)div元素，并給它一個(gè)類名，比如star-sky。

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

2. CSS樣式

我們使用CSS來(lái)定義星空的背景和星星的樣式，以下是一個(gè)簡(jiǎn)單的示例：

.star-sky {
  position: relative;
  width: 100%;
  height: 100vh; /* 100% of viewport height */
  background: #000;
}
.star-sky::before, .star-sky::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
}
.star-sky::before {
  z-index: -1;
  background: url('path-to-your-star-image') no-repeat center center;
  background-size: cover;
}
.star-sky::after {
  z-index: -2;
  background: url('path-to-your-night-sky-image') no-repeat center center;
  background-size: cover;
}
.star {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px; /* Adjust star size here */
  height: 1px; /* Adjust star size here */
  background: #fff; /* White star color */
  transform: rotate(45deg); /* Rotate star to make it look like a star */
}

3. 添加星星

我們可以在JavaScript中使用setInterval函數(shù)來(lái)動(dòng)態(tài)添加星星到星空中，以下是一個(gè)簡(jiǎn)單的示例：

function addStars() {
  let sky = document.querySelector('.star-sky');
  let stars = document.createElement('div');
  stars.className = 'star';
  stars.style.left =${Math.random() * 100}%; // Randomly position stars horizontally
  stars.style.top =${Math.random() * 100}%; // Randomly position stars vertically
  sky.appendChild(stars);
}
// Call addStars every second to add new stars to the sky
setInterval(addStars, 1000); // Adjust interval as needed to change star speed or density

4. 優(yōu)化和擴(kuò)展

示例僅提供了一個(gè)基本的星空效果，你可以根據(jù)自己的需求進(jìn)行優(yōu)化和擴(kuò)展，你可以添加更多的星星，調(diào)整星星的顏色、大小、形狀等，以及添加一些交互效果，如星星閃爍或移動(dòng)軌跡等，你還可以考慮使用更復(fù)雜的算法來(lái)生成更逼真的星空效果，希望這些示例能幫助你實(shí)現(xiàn)想要的星空效果！