HTML宇宙特效是一種非常酷炫的效果，許多網站都會用到。這個特效可以讓你在網頁上看到宇宙中的星星，行星和其他天體移動的效果。
<!DOCTYPE html>
<html>
<head>
<title>宇宙特效</title>
<style>
#space {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #000000;
}
.star {
position: absolute;
border-radius: 50%;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="space"></div>
<script>
for (var i = 0; i < 200; i++) {
var star = document.createElement("div");
star.className = "star";
var x = Math.floor(Math.random() * window.innerWidth);
var y = Math.floor(Math.random() * window.innerHeight);
var size = Math.random() * 5;
star.style.left = x +"px";
star.style.top = y +"px";
star.style.width = size +"px";
star.style.height = size +"px";
var duration = Math.random() * 10;
star.style.animation = "twinkle "+ duration +"s infinite";
document.getElementById("space").appendChild(star);
}
for (var j = 0; j < 10; j++) {
var planet = document.createElement("div");
planet.className = "star";
var x = Math.floor(Math.random() * window.innerWidth);
var y = Math.floor(Math.random() * window.innerHeight);
var size = Math.random() * 50 + 50;
planet.style.left = x +"px";
planet.style.top = y +"px";
planet.style.width = size +"px";
planet.style.height = size +"px";
planet.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
var duration = Math.random() * 50 + 50;
planet.style.animation = "rotate "+ duration +"s infinite linear";
document.getElementById("space").appendChild(planet);
}
</script>
</body>
</html>以上是HTML宇宙特效的代碼，首先需要創建一個div元素，用來表示宇宙。然后使用JavaScript在div中添加星星和行星元素，隨機分布在整個宇宙的區域。
星星和行星元素都使用了絕對定位，以便它們可以移動和旋轉。星星元素的大小不同，并帶有一個看起來像星光閃爍的動畫效果，而行星元素是虛化的，并帶有繞著它自身旋轉的動畫效果。
這個HTML宇宙特效非常逼真，如果你想讓你的網頁更有個性，可以使用它。
上一篇html怎么設置兩行字體
下一篇html怎么設置中有橫線