查看“Widget:Fireworks”的源代码

<includeonly>
<style>
        .fireworks {
            position: fixed;
            top: 0;
            width: 300px;
            height: 100%;
            pointer-events: none;
            user-select: none;
        }

        #fireworks-left {
            left: 0;
            background: linear-gradient(to left,transparent,#2b3a6d46);
        }

        #fireworks-right {
            right: 0;
            background: linear-gradient(to right,transparent,#2b3a6d46);
        }
</style>
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>

    <script>
        // 初始化烟花效果
        function initFireworks() {
            // 创建左侧烟花容器
            const leftFireworksDiv = document.createElement('div');
            leftFireworksDiv.className = 'fireworks';
            leftFireworksDiv.id = 'fireworks-left';
            document.body.appendChild(leftFireworksDiv);

            // 创建右侧烟花容器
            const rightFireworksDiv = document.createElement('div');
            rightFireworksDiv.className = 'fireworks';
            rightFireworksDiv.id = 'fireworks-right';
            document.body.appendChild(rightFireworksDiv);

            // 烟花配置
            const fireworksConfig = {
                autoresize: true,          // 自动调整大小
                opacity: 0.3,              // 不透明度
                acceleration: 1.01,         // 加速度，值越小上升越慢
                friction: 0.88,            // 摩擦力
                gravity: 1.5,                // 重力，值越大下落越快
                particles: 105,             // 粒子数量
                traceLength: 2,            // 轨迹长度
                traceSpeed: 20,             // 轨迹速度，值越小上升越慢
                explosion: 1,              // 爆炸范围大小
                intensity: 75,             // 爆炸强度
                flickering: 100,            // 闪烁程度，值越小越稳定
                lineStyle: 'round',       // 粒子样式：'square'方形，'round'圆形
                sound: {
                    enabled: false,        // 是否启用声音
                },
                hue: {
                    min: 0,               // 颜色色相最小值（0-360）
                    max: 50              // 颜色色相最大值（0-360）
                },
                delay: {
                    min: 300,              // 发射最小延迟时间（增加延迟）
                    max: 800              // 发射最大延迟时间（增加延迟）
                },
                lineWidth: {
                    explosion: {
                        min: 0.5,         // 爆炸粒子最小宽度
                        max: 2            // 爆炸粒子最大宽度
                    },
                    trace: {
                        min: 0.2,           // 上升轨迹最小宽度
                        max: 0.5            // 上升轨迹最大宽度
                    }
                },
                brightness: {
                    min: 60,             // 亮度最小值（0-100）
                    max: 90              // 亮度最大值（0-100）
                },
                decay: {
                    min: 0.015,          // 最小衰减速度（值越小，爆炸效果持续越长）
                    max: 0.02           // 最大衰减速度
                },
                mouse: {
                    click: true,         // 是否允许点击触发
                    move: false,         // 是否允许鼠标移动触发
                    max: 1               // 同时允许触发的最大数量
                }
            };

            // 创建并启动左侧烟花
            const fireworksLeft = new Fireworks.default(leftFireworksDiv, {
                ...fireworksConfig,
                rocketsPoint: {
                    min: 0,
                    max: 10
                },
                boundaries: {
                    x: 0,
                    y: 0,
                    width: 200,
                    height: window.innerHeight
                }
            });

            // 创建并启动右侧烟花
            const fireworksRight = new Fireworks.default(rightFireworksDiv, {
                ...fireworksConfig,
                rocketsPoint: {
                    min: 90,
                    max: 100
                },
                boundaries: {
                    x: 0,
                    y: 0,
                    width: 200,
                    height: window.innerHeight
                }
            });

            // 开始放烟花
            fireworksLeft.start();
            fireworksRight.start();
        }

        // 检查设备是否适合显示烟花
        // 检查设备是否适合显示烟花
        function checkDeviceSupport() {
            // 检查是否为移动设备
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            // 检查屏幕宽度
            const isSmallScreen = window.innerWidth < 768;
            
            // 如果是移动设备或小屏幕，则不显示烟花
            return !isMobile && !isSmallScreen;
        }

        // 当页面加载完成时执行
        window.addEventListener('load', function() {
            if (checkDeviceSupport()) {
                initFireworks();
            }
        });
    </script>
</includeonly><noinclude>
{{#widget:fireworks}}
= 烟花效果配置说明 =

基于 [fireworks-js](https://fireworks.js.org/) 库实现的烟花特效，支持丰富的自定义配置。

== 基础配置参数 ==

=== 核心参数 ===
* autoresize: 是否自动调整大小 (默认: true)
* opacity: 画布不透明度，取值范围 0-1 (默认: 1)
* acceleration: 加速度，值越小上升越慢 (默认: 1.05)
* friction: 摩擦力，影响粒子运动 (默认: 0.97)
* gravity: 重力，值越大下落越快 (默认: 1.5)

=== 粒子效果 ===
* particles: 爆炸后的粒子数量 (默认: 50)
* traceLength: 烟花上升轨迹长度 (默认: 3)
* traceSpeed: 轨迹速度，值越小上升越慢 (默认: 10)
* explosion: 爆炸范围大小 (默认: 5)
* intensity: 爆炸强度 (默认: 30)
* flickering: 闪烁程度，值越小越稳定 (默认: 50)
* lineStyle: 粒子样式，可选 square方形或round圆形 (默认: round)

=== 颜色与亮度 ===
* hue: 颜色色相范围
** min: 最小值，0-360 (默认: 0)
** max: 最大值，0-360 (默认: 360)
* brightness: 亮度范围
** min: 最小值，0-100 (默认: 50)
** max: 最大值，0-100 (默认: 80)

=== 发射与延迟 ===
* delay: 发射延迟时间
** min: 最小延迟时间 (默认: 30ms)
** max: 最大延迟时间 (默认: 60ms)

=== 线条宽度 ===
* lineWidth.explosion: 爆炸粒子线条
** min: 最小宽度 (默认: 1)
** max: 最大宽度 (默认: 3)
* lineWidth.trace: 上升轨迹线条
** min: 最小宽度 (默认: 1)
** max: 最大宽度 (默认: 2)

=== 衰减效果 ===
* decay: 粒子衰减速度
** min: 最小衰减速度，值越小效果持续越长 (默认: 0.015)
** max: 最大衰减速度 (默认: 0.03)

=== 鼠标交互 ===
* mouse.click: 是否允许点击触发 (默认: false)
* mouse.move: 是否允许鼠标移动触发 (默认: false)
* max: 同时允许触发的最大数量 (默认: 3)

=== 声音效果 ===
* sound.enabled: 是否启用声音 (默认: false)

== 使用示例 ==

<pre>
const fireworksConfig = {
    // 核心参数
    autoresize: true,          // 自动调整画布大小
    opacity: 0.3,              // 画布不透明度（官方默认: 1）
    acceleration: 1.01,        // 加速度（官方默认: 1.05）
    friction: 0.85,            // 摩擦力（官方默认: 0.97）
    gravity: 1.5,              // 重力，影响下落速度

    // 粒子效果
    particles: 55,             // 爆炸粒子数量（官方默认: 50）
    traceLength: 3,            // 上升轨迹长度
    traceSpeed: 3,             // 上升速度（官方默认: 10）
    explosion: 1,              // 爆炸范围（官方默认: 5）
    intensity: 55,             // 爆炸强度（官方默认: 30）
    flickering: 25,            // 火花闪烁程度（官方默认: 50）
    lineStyle: 'round',        // 粒子形状：round圆形，square方形

    // 颜色与亮度
    hue: {
        min: 0,                // 色相最小值（0-360）
        max: 360               // 色相最大值（0-360）
    },
    brightness: {
        min: 60,               // 亮度最小值（官方默认: 50）
        max: 90                // 亮度最大值（官方默认: 80）
    },

    // 发射与延迟
    delay: {
        min: 100,              // 最小发射延迟（官方默认: 30ms）
        max: 200               // 最大发射延迟（官方默认: 60ms）
    },

    // 线条宽度
    lineWidth: {
        explosion: {
            min: 1,            // 爆炸粒子最小宽度
            max: 2             // 爆炸粒子最大宽度（官方默认: 3）
        },
        trace: {
            min: 0.5,          // 上升轨迹最小宽度（官方默认: 1）
            max: 1             // 上升轨迹最大宽度（官方默认: 2）
        }
    },

    // 衰减效果
    decay: {
        min: 0.010,           // 最小衰减速度（官方默认: 0.015）
        max: 0.015            // 最大衰减速度（官方默认: 0.03）
    },

    // 鼠标交互
    mouse: {
        click: true,          // 是否允许点击触发（官方默认: false）
        move: false,          // 是否允许鼠标移动触发
        max: 1                // 同时触发数量（官方默认: 3）
    },

    // 声音效果
    sound: {
        enabled: false        // 是否启用声音效果
    },

    // 发射位置和边界（可选，用于限制烟花范围）
    rocketsPoint: {
        min: 0,               // 发射位置最小X坐标
        max: 100              // 发射位置最大X坐标
    },
    boundaries: {
        x: 0,                 // 边界左上角X坐标
        y: 0,                 // 边界左上角Y坐标
        width: window.innerWidth,   // 边界宽度
        height: window.innerHeight  // 边界高度
    }
};

// 创建并启动烟花
const container = document.querySelector('.fireworks');
const fireworks = new Fireworks.default(container, fireworksConfig);
fireworks.start();
</pre>

你可以根据需要调整这些参数来实现不同的烟花效果。较小的重力值会使烟花下落更慢，较大的粒子数量会使爆炸效果更绚丽，调整色相范围可以限制烟花的颜色等。 

</noinclude>