请编写一个html实现星空效果
时间: 2023-04-08 22:03:29 浏览: 98
好的,我可以回答这个问题。以下是一个简单的HTML代码,可以实现星空效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>星空效果</title>
<style>
body {
background-color: black;
}
.stars {
position: absolute;
width: 1px;
height: 1px;
background-color: white;
box-shadow: 1px 1px white;
animation: twinkling 1s infinite;
}
@keyframes twinkling {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<script>
// 创建星星
for (var i = 0; i < 100; i++) {
var star = document.createElement("div");
star.classList.add("stars");
star.style.left = Math.random() * 100 + "%";
star.style.top = Math.random() * 100 + "%";
document.body.appendChild(star);
}
</script>
</body>
</html>
```
这段代码会在黑色背景上生成100个白色的小点,通过动画效果让它们闪烁,形成星空效果。