html代碼特效銀河系源代碼

Cloud computing and code 2023年05月15日 10:13 869 visitor

以下是一個 HTML 代碼特效銀河系的示例代碼及解釋元素。

html代碼特效銀河系源代碼第1张

<!DOCTYPE html>
<html>
<head>
<title>銀河系特效</title>
<style>
/* 設定整個 HTML 頁面的背景色為黑色，同時隱藏頁面中超出部分的內容 */
body{
background: #000;
overflow: hidden;
}
/* 定義一個用於表示星星的類 star */
.star{
position: absolute; /* 設置元素的位置為絕對定位 */
width: 5px; /* 設置元素的寬度為 5 像素 */
height: 5px; /* 設置元素的高度為 5 像素 */
border-radius: 50%; /* 設置元素的邊框半徑為 50%，使其變為圓形 */
background: #fff; /* 設置元素的背景色為白色 */
animation: animStar 10s linear infinite; /* 設置元素的動畫，animStar 表示動畫名稱，10s 表示動畫時長為 10 秒，linear 表示動畫速度線性，infinite 表示動畫無限循環 */
}
/* 定義星星的動畫 */
@keyframes animStar{
from{ /* 定義動畫的初始狀態 */
transform: translate(0, 0); /* 將元素向右上角平移 0 像素 */
opacity: 1; /* 元素不透明（即完全可見） */
}
50%{ /* 定義動畫的中間狀態 */
transform: translate(1600px, 1000px); /* 將元素向右下角平移 1600 像素、向下平移 1000 像素 */
opacity: 0; /* 元素透明（即完全不可見） */
}
to{ /* 定義動畫的最終狀態 */
transform: translate(0, 0); /* 將元素向右上角平移 0 像素 */
opacity: 1; /* 元素不透明（即完全可見） */
}
}
</style>
</head>
<body>
<script>
/* 使用 JavaScript 動態創建星星元素 */
for(var i = 0; i < 2000; i++){
var star = document.createElement("div"); /* 創建一個 div 元素作為星星 */
star.setAttribute("class", "star"); /* 將星星的類設置為 star */
star.style.top = Math.floor(Math.random() * window.innerHeight) + "px"; /* 隨機設置星星的縱坐標位置 */
star.style.left = Math.floor(Math.random() * window.innerWidth) + "px"; /* 隨機設置星星的橫坐標位置 */
var size = Math.floor(Math.random() * 10); /* 隨機設置星星的大小 */
star.style.width = size + "px";
star.style.height = size + "px";
document.body.appendChild(star); /* 將星星元素添加到 HTML 頁面中 */
}
</script>
</body>
</html>

該示例代碼的元素解釋如下：

- `<!DOCTYPE html>`：聲明 HTML 文檔類型

- `<html>`：HTML 文檔的根元素

- `<head>`：包含用於定義文檔信息和元數據的元素

- `<title>`：定義文檔的標題

- `<style>`：包含 CSS 樣式規則的元素

- `body` 元素：HTML 頁面的主體部分

- `.star` 類：用於表示星星的 CSS 類

- `position: absolute;`：設置元素的定位方式為絕對定位

- `width: 5px;`：設置元素的寬度為 5 像素

- `height: 5px;`：設置元素的高度為 5 像素

- `border-radius: 50%;`：將元素的邊框半徑設置為 50%，使其變為圓形