流星雨，自古以来就是浪漫的象征。如今，我们不仅能在夜空中欣赏到它的美丽，还能将它带到我们的网页上。下面，就让我带你一起探索如何用简单的代码打造流星雨效果，让你的网页瞬间变得璀璨夺目。

准备工作

在开始之前，我们需要准备以下工具：

  1. HTML文件：创建一个HTML文件，用于展示流星雨效果。
  2. CSS文件：编写CSS样式，用于美化流星雨效果。
  3. JavaScript文件：编写JavaScript代码，实现流星雨效果。

HTML结构

首先，我们需要在HTML文件中添加一个容器元素，用于展示流星雨效果。以下是HTML代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>流星雨效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="galaxy"></div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们需要为流星雨效果添加一些CSS样式。以下是CSS代码示例：

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

#galaxy {
    position: relative;
    width: 100%;
    height: 100%;
}

JavaScript代码

最后，我们来编写JavaScript代码，实现流星雨效果。以下是JavaScript代码示例：

document.addEventListener('DOMContentLoaded', function() {
    const galaxy = document.getElementById('galaxy');
    const stars = [];

    function createStar() {
        const star = document.createElement('div');
        star.style.position = 'absolute';
        star.style.width = '2px';
        star.style.height = '2px';
        star.style.borderRadius = '50%';
        star.style.backgroundColor = '#fff';
        star.style.top = Math.random() * 100 + '%';
        star.style.left = Math.random() * 100 + '%';
        star.style.opacity = Math.random();
        galaxy.appendChild(star);
        stars.push(star);
    }

    function moveStars() {
        stars.forEach(star => {
            const speed = Math.random() * 2 + 1;
            star.style.top = (parseFloat(star.style.top) - speed) + '%';
            if (parseFloat(star.style.top) <= 0) {
                star.style.top = 100 + '%';
            }
        });
    }

    setInterval(createStar, 100);
    setInterval(moveStars, 30);
});

效果展示

完成以上步骤后，打开HTML文件，你将看到一个充满浪漫气息的流星雨效果。你可以通过调整CSS样式和JavaScript代码，实现更多有趣的效果。

通过以上步骤，你学会了如何用简单代码打造流星雨效果。现在，让你的网页也变得璀璨夺目吧！