会动的星空html代码
时间: 2024-03-24 13:34:00 浏览: 8
当涉及到在网页上实现动态效果时,可以使用CSS和JavaScript来实现。以下是一个简单的示例,展示如何创建一个会动的星空效果的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置背景颜色为黑色 */
body {
background-color: black;
overflow: hidden;
}
/* 创建星星的样式 */
.star {
position: absolute;
width: 1px;
height: 1px;
background-color: white;
}
</style>
</head>
<body>
<script>
// 获取屏幕的宽度和高度
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
// 创建星星
function createStar() {
var star = document.createElement("div");
star.className = "star";
// 设置星星的随机位置
var posX = Math.random() * screenWidth;
var posY = Math.random() * screenHeight;
star.style.left = posX + "px";
star.style.top = posY + "px";
// 设置星星的随机闪烁速度
var blinkSpeed = Math.random() * 2 + 0.5;
star.style.animation = "blink " + blinkSpeed + "s infinite";
// 将星星添加到页面中
document.body.appendChild(star);
}
// 创建多个星星
function createStars(numStars) {
for (var i = 0; i < numStars; i++) {
createStar();
}
}
// 调用函数创建星星
createStars(100);
</script>
</body>
</html>
```
这段代码会在网页上创建一个黑色的背景,并在页面上随机生成100个闪烁的白色小星星。你可以根据需要调整星星的数量和样式。希望对你有所帮助!