首页超好看的流星雨代码 html

超好看的流星雨代码 html

时间: 2024-10-29 21:15:53 浏览: 30

流星雨效果通常通过JavaScript和HTML结合来实现，并非直接提供HTML代码就能看到流星雨，因为这需要动态效果和一些交互。不过我可以给你一个简单的示例，展示如何在HTML中设置基础框架，然后用JavaScript创建流星雨动画： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>流星雨</title> <style> #sky { position: relative; width: 100%; height: 400px; background-color: black; } .meteor { position: absolute; width: 5px; height: 10px; background-color: white; animation: meteor 2s linear infinite; } @keyframes meteor { 0% {top: 100%; opacity: 1;} 100% {top: -100%; opacity: 0; transform: translateY(200px);} } </style> </head> <body> <div id="sky"></div>  <script> for (let i = 0; i < 20; i++) { let meteor = document.createElement('div'); meteor.classList.add('meteor'); meteor.style.left = Math.random() * 100 + '%'; document.getElementById('sky').appendChild(meteor); } </script> </body> </html> ``` 这个示例会创建20颗流星，它们随机出现在天空背景上并向下移动消失。实际应用中，你可能会添加更复杂的动画效果和事件监听。

阅读全文