html代碼特效銀河系源代碼
以下是一個 HTML 代碼特效銀河系的示例代碼及解釋元素。
<!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%，使其變為圓形
- `background: #fff;`：設置元素的背景色為白色
- `animation: animStar 10s linear infinite;`：設置元素的動畫效果為animStar，動畫時長為 10 秒，動畫速度線性，動畫無限循環
- `@keyframes animStart`：定義一個叫做 `animStart` 的 CSS3 動畫
- `transform` 屬性：元素的轉換樣式
- `opacity` 屬性：元素的不透明度（即可見度）
- `<script>`：包含用於編寫 JavaScript 代碼的元素
- `document.createElement()` 方法：通過該方法創建新的元素
- `star.setAttribute()` 方法：為新的元素設置屬性
- `Math.random()` 方法：用於生成隨機數
- `document.body.appendChild()` 方法：將新的元素添加到 HTML 頁面中
以上就是該 HTML 代碼特效銀河系的示例代碼及解釋元素。
