以下是一个 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 代码特效银河系的示例代码及解释元素。
专题推荐：