首页html最少代码写一个流星雨

html最少代码写一个流星雨

时间: 2024-01-29 16:02:44 浏览: 75

以下是最少代码实现流星雨的 HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>流星雨</title> <style> body { background-color: black; } .star { position: absolute; background-color: white; width: 2px; height: 2px; border-radius: 50%; animation: shooting-star 1s linear infinite; } @keyframes shooting-star { from { top: 0; left: 0; transform: rotate(45deg); } to { top: 100%; left: 100%; transform: rotate(-135deg); } } </style> </head> <body> <script> function createStar() { const star = document.createElement("div"); star.classList.add("star"); star.style.top = Math.random() * 100 + "%"; star.style.left = Math.random() * 100 + "%"; document.body.appendChild(star); setTimeout(() => { document.body.removeChild(star); }, 1000); } setInterval(createStar, 200); </script> </body> </html> ``` 这个代码实现了一个简单的流星雨效果，每 200 毫秒随机在页面中创建一个白色小球，然后让它飞行到页面底部，飞行过程中加入了旋转动画，最后在页面底部消失。

阅读全文