HTML中的滿(mǎn)天星代碼是一種經(jīng)典的特效，通過(guò)代碼實(shí)現(xiàn)了一個(gè)小星星在瀏覽器頁(yè)面上飛行的效果。
<!DOCTYPE html>
<html>
<head>
<title>滿(mǎn)天星特效</title>
<style>
/* 定義星星樣式 */
.star{
position:absolute;
top:0;
left:0;
width:8px;
height:8px;
background-color:#ffffff;
border-radius:4px;
box-shadow: 0 0 10px #ffffff;
}
</style>
</head>
<body>
<script>
// 定義變量
var stars = [];
var count = 300;
var w = window.innerWidth;
var h = window.innerHeight;
// 創(chuàng)建指定數(shù)量的小星星
for(var i=0;i<count;i++){
stars[i] = document.createElement("div");
stars[i].setAttribute("class","star");
stars[i].style.left = Math.random()*w + "px";
stars[i].style.top = Math.random()*h + "px";
document.body.appendChild(stars[i]);
}
// 移動(dòng)小星星
function move(){
for(var i=0;i<count;i++){
var star = stars[i];
if(star.offsetTop < 0){
star.style.top = h + "px";
}else{
star.style.top = star.offsetTop - 3 + "px";
}
}
requestAnimationFrame(move);
}
move();
</script>
</body>
</html>代碼中，首先定義了小星星的樣式，然后通過(guò)JS動(dòng)態(tài)創(chuàng)建了指定數(shù)量的小星星，并隨機(jī)生成它們的位置。隨后使用requestAnimationFrame實(shí)現(xiàn)小星星的運(yùn)動(dòng)效果，當(dāng)小星星越過(guò)了頁(yè)面的上邊界，就將它的top值重置為頁(yè)面的高度，以實(shí)現(xiàn)循環(huán)滾動(dòng)的效果。
總體而言，滿(mǎn)天星特效是一種比較簡(jiǎn)單但實(shí)用的網(wǎng)頁(yè)特效，通過(guò)合理的JS代碼和CSS樣式，可以實(shí)現(xiàn)非常美觀的效果，很好地提升網(wǎng)頁(yè)的視覺(jué)體驗(yàn)。