在这个数字化时代，网站不仅是信息展示的平台，更是艺术与技术的结合体。HTML5，作为现代网页开发的核心技术之一，为我们提供了丰富的创意空间。今天，就让我们用HTML5和简单的JavaScript代码，为你的网站增添一场梦幻流星雨效果，让你的网站焕发星光！

基础准备

首先，确保你的HTML文档使用了HTML5的DOCTYPE声明，并且引入了必要的CSS和JavaScript文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星雨效果</title>
    <style>
        /* 在这里添加你的CSS样式 */
    </style>
</head>
<body>
    <!-- 在这里添加你的HTML内容 -->
    <script>
        // 在这里添加你的JavaScript代码
    </script>
</body>
</html>

流星雨效果实现

接下来，我们将通过JavaScript和CSS来实现流星雨效果。

1. JavaScript部分

JavaScript部分负责生成流星，并控制它们的移动和消失。

// 初始化流星数组
const meteors = [];

// 生成流星
function createMeteor() {
    const meteor = {
        x: Math.random() * window.innerWidth,
        y: Math.random() * window.innerHeight,
        size: Math.random() * 5 + 1,
        speed: Math.random() * 3 + 1,
        angle: Math.random() * Math.PI * 2
    };

    meteors.push(meteor);
}

// 更新流星位置
function updateMeteors() {
    for (let i = meteors.length - 1; i >= 0; i--) {
        const meteor = meteors[i];
        meteor.x += meteor.speed * Math.cos(meteor.angle);
        meteor.y -= meteor.speed * Math.sin(meteor.angle);

        if (meteor.x < 0 || meteor.x > window.innerWidth || meteor.y < 0 || meteor.y > window.innerHeight) {
            meteors.splice(i, 1);
        }
    }
}

// 绘制流星
function drawMeteors() {
    const canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.position = 'absolute';
    canvas.style.top = '0';
    canvas.style.left = '0';
    document.body.appendChild(canvas);

    const ctx = canvas.getContext('2d');

    for (let meteor of meteors) {
        ctx.beginPath();
        ctx.arc(meteor.x, meteor.y, meteor.size, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.fill();
    }
}

// 主函数
function main() {
    setInterval(createMeteor, 100);
    setInterval(updateMeteors, 30);
    setInterval(drawMeteors, 30);
}

// 页面加载完成后执行
window.onload = main;

2. CSS部分

CSS部分可以用来美化流星的外观，以及调整流星雨的整体风格。

/* 在这里添加你的CSS样式 */
canvas {
    z-index: -1;
}

总结

通过以上代码，你可以在你的网站中实现一场梦幻流星雨效果。你可以根据自己的需求调整流星的颜色、大小、速度等属性，以创造出独一无二的视觉效果。现在，让你的网站焕发星光吧！