首页生产一段HTML流星雨代码

生产一段HTML流星雨代码

时间: 2024-09-11 13:06:40 浏览: 47

创建一个简单的HTML流星雨效果需要结合HTML、CSS和JavaScript。以下是一个基本示例，展示了如何实现流星雨动画效果： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流星雨效果</title> <style> body, html { height: 100%; margin: 0; overflow: hidden; background: #000; } .star { position: absolute; width: 2px; height: 100px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); box-shadow: 0 0 5px #fff; } </style> </head> <body> <script> function createStar() { const star = document.createElement('div'); star.classList.add('star'); star.style.left = Math.random() * 100 + 'vw'; star.style.top = -100 + 'px'; document.body.appendChild(star); moveStar(star); } function moveStar(star) { let positionTop = parseInt(star.style.top); if (positionTop < window.innerHeight) { positionTop += Math.random() * 3 + 1; star.style.top = positionTop + 'px'; } else { star.remove(); } requestAnimationFrame(() => moveStar(star)); } for (let i = 0; i < 100; i++) { createStar(); } </script> </body> </html> ``` 这段代码的解释如下： 1. HTML部分定义了一个基本的页面结构。 2. CSS部分定义了流星的样式，包括位置、大小和颜色渐变效果。 3. JavaScript部分首先创建流星元素，并且通过`createStar`函数将它们添加到页面中。然后，`moveStar`函数使得每个流星元素向下移动，并在到达窗口底部时消失。

阅读全文