首页写一个黑客帝国流星雨的HTML代码

写一个黑客帝国流星雨的HTML代码

时间: 2023-12-01 13:03:03 浏览: 103

以下是一个简单的黑客帝国流星雨效果的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>黑客帝国流星雨</title> <style> body { margin: 0; padding: 0; overflow: hidden; background: #000; } .streak { position: absolute; background: #fff; opacity: 0; pointer-events: none; border-radius: 50%; transform: scale(0); animation: streak 0.5s ease-out infinite; } @keyframes streak { 0% { opacity: 1; transform: scale(0); } 50% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } } </style> </head> <body> <script> function createStreak() { const streak = document.createElement('div'); streak.className = 'streak'; streak.style.left = Math.random() * window.innerWidth + 'px'; streak.style.top = Math.random() * window.innerHeight + 'px'; document.body.appendChild(streak); setTimeout(() => { document.body.removeChild(streak); }, 1000); } setInterval(createStreak, 50); </script> </body> </html> ``` 这段代码会在浏览器中显示一个黑色的背景，并在其中随机生成多个白色的圆形流星，模拟黑客帝国中的流星雨效果。注意，这只是一个简单的示例代码，实际效果可以根据需要进行调整和优化。

阅读全文