首页写一个满是五角星的星空页面

写一个满是五角星的星空页面

时间: 2023-12-16 12:06:12 浏览: 24

很高兴回答你的问题，下面是一个简单的 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> ``` 这段代码会在黑色背景上生成五个白色的、有动画效果的五角星，它们分布在不同的位置。你可以根据自己的需要调整星星的数量、位置和大小。