瑕佸湪HTML涓疄鐜版槦鏄熷潬钀芥晥鏋滐紝浣犲彲浠ヤ娇鐢–SS鍜孞avaScript鏉ュ垱寤哄姩鐢绘晥鏋溿€備互涓嬫槸涓€绉嶇畝鍗曠殑鏂规硶锛?/span>

1. 鍒涘缓HTML缁撴瀯锛氶鍏堬紝鍦℉TML鏂囦欢涓垱寤轰竴涓鍣ㄥ厓绱狅紝鐢ㄤ簬鍖呭惈鏄熸槦鍏冪礌銆備緥濡傦細

<div id="star-container"></div>

2. 娣诲姞CSS鏍峰紡锛氫娇鐢–SS涓哄鍣ㄥ拰鏄熸槦鍏冪礌璁剧疆鏍峰紡锛屼互渚胯皟鏁村畠浠殑浣嶇疆銆佸ぇ灏忓拰澶栬銆備緥濡傦細

#star-container {
  position: relative;
  height: 100vh; /* 璁剧疆瀹瑰櫒鐨勯珮搴︿负瑙嗗彛鐨勯珮搴?nbsp;*/
  overflow: hidden; /* 闅愯棌瓒呭嚭瀹瑰櫒鑼冨洿鐨勫厓绱?nbsp;*/
}
.star {
  position: absolute;
  top: -50px; /* 鍒濆浣嶇疆鍦ㄥ鍣ㄤ笂鏂癸紝鍙互鏍规嵁闇€瑕佽皟鏁?nbsp;*/
  left: calc(50% - 10px); /* 姘村钩灞呬腑浣嶇疆锛屽彲浠ユ牴鎹渶瑕佽皟鏁?nbsp;*/
  width: 20px; /* 鏄熸槦鐨勫搴?nbsp;*/
  height: 20px; /* 鏄熸槦鐨勯珮搴?nbsp;*/
  background-color: yellow; /* 鏄熸槦鐨勯鑹诧紝鍙互鏍规嵁闇€瑕佽皟鏁?nbsp;*/
}

3. 浣跨敤JavaScript鍒涘缓鍔ㄧ敾锛氫娇鐢↗avaScript鏉ユ帶鍒舵槦鏄熺殑浣嶇疆锛屼娇鍏堕€愭笎鍚戜笅绉诲姩锛屽苟鍦ㄥ埌杈惧簳閮ㄦ椂閲嶆柊鍥炲埌椤堕儴銆備緥濡傦細

// 鑾峰彇鏄熸槦瀹瑰櫒鍏冪礌
var container = document.getElementById('star-container');
// 鍒涘缓鏄熸槦鍏冪礌
for (var i = 0; i < 50; i++) {
  var star = document.createElement('div');
  star.className = 'star';
  container.appendChild(star);
}
// 鍔ㄧ敾鏁堟灉
function animateStars() {
  var stars = document.getElementsByClassName('star');
  setInterval(function() {
    for (var i = 0; i < stars.length; i++) {
      var star = stars[i];
      var top = parseInt(star.style.top) || -50;
      // 鎺у埗鏄熸槦鐨勪綅缃?/p>
      if (top >= window.innerHeight) {
        top = -50;
      } else {
        top += 1; // 璋冩暣閫熷害锛屽彲浠ユ牴鎹渶瑕佽皟鏁?/p>
      }
      
      star.style.top = top + 'px';
    }
  }, 10); // 璋冩暣鍔ㄧ敾甯х巼锛屽彲浠ユ牴鎹渶瑕佽皟鏁?/p>
}
animateStars();

淇濆瓨浠ヤ笂浠ｇ爜骞跺湪娴忚鍣ㄤ腑棰勮锛屼綘搴旇鑳藉鐪嬪埌鏄熸槦浠庨《閮ㄩ€愭笎鍚戜笅绉诲姩锛屽綋瀹冧滑鍒拌揪搴曢儴鏃堕噸鏂板洖鍒伴《閮紝瀹炵幇浜嗘槦鏄熷潬钀芥晥鏋溿€備綘鍙互鏍规嵁闇€瑕佽皟鏁存牱寮忓拰鍔ㄧ敾鍙傛暟鏉ユ弧瓒充綘鐨勯渶姹傘€?/span>