写一个满是五角星的星空页面
时间: 2023-12-16 22:06:12 浏览: 100
显示五角星
很高兴回答你的问题,下面是一个简单的 HTML 和 CSS 代码,可以生成一个满是五角星的星空页面。
```html
<!DOCTYPE html>
<html>
<head>
<title>星空页面</title>
<style>
body {
background-color: black;
}
.star {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
animation: twinkle 1s infinite;
}
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.star1 {
animation-delay: 0.2s;
top: 20%;
left: 30%;
}
.star2 {
animation-delay: 0.4s;
top: 70%;
left: 80%;
}
.star3 {
animation-delay: 0.6s;
top: 90%;
left: 10%;
}
.star4 {
animation-delay: 0.8s;
top: 40%;
left: 70%;
}
.star5 {
animation-delay: 1s;
top: 60%;
left: 20%;
}
</style>
</head>
<body>
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
<div class="star star5"></div>
</body>
</html>
```
这段代码会在黑色背景上生成五个白色的、有动画效果的五角星,它们分布在不同的位置。你可以根据自己的需要调整星星的数量、位置和大小。
阅读全文