首页编写一个流星雨的HTML

编写一个流星雨的HTML

时间: 2024-05-10 22:18:19 浏览: 97

以下是一个简单的流星雨效果的HTML代码： ``` <!DOCTYPE html> <html> <head> <title>流星雨</title> <style> body { background-color: #000; overflow: hidden; } .star { position: absolute; background-color: #fff; border-radius: 50%; width: 2px; height: 2px; animation: star 1s infinite; opacity: 0; } @keyframes star { 0% {transform: scale(1) translateY(0);} 50% {transform: scale(5) translateY(500px); opacity: 1;} 100% {transform: scale(1) translateY(1000px); opacity: 0;} } </style> </head> <body> <script> // 创建流星 function createStar() { var star = document.createElement('div'); star.className = 'star'; star.style.left = Math.random() * window.innerWidth + 'px'; document.body.appendChild(star); setTimeout(function() { document.body.removeChild(star); }, 2000); } // 每隔0.1秒创建一个流星 setInterval(createStar, 100); </script> </body> </html> ``` 这段代码使用了CSS3的动画和JavaScript的定时器来实现流星雨效果。在页面加载时，会创建一个名为`star`的CSS类，它定义了流星的样式和动画效果。在JavaScript中，`createStar`函数会创建一个新的`div`元素，并将其添加到页面中。通过定时器，每隔0.1秒就会调用一次`createStar`函数来创建新的流星。流星的出现位置是随机的，它们会逐渐落下并消失。这个简单的示例可以通过调整CSS样式和JavaScript代码来制作更加逼真的流星雨效果。

阅读全文