html页面烟花代码

### HTML 页面烟花效果实现

为了实现在HTML页面上展示烟花绽放的效果，可以采用CSS3和JavaScript相结合的方式。下面是一个完整的示例代码片段。

#### CSS部分
定义基本样式以及动画的关键帧：

/* 定义烟花粒子 */
@keyframes explode {
    0% { transform: scale(0); opacity: 1;}
    100% { transform: scale(5); opacity: 0;}
}

.firework-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: white;
    animation-name: explode;
    animation-duration: 1s;
}

#### JavaScript部分
创建并控制烟花爆炸逻辑，在文档加载完成后执行初始化操作[^1]：

document.addEventListener("DOMContentLoaded", function() {

    const createFirework = (x, y) => {
        let particleCount = Math.floor(Math.random() * 80) + 20;

        for(let i=0;i<particleCount;i++){
            let particle=document.createElement('div');
            document.body.appendChild(particle);
            particle.classList.add('firework-particle');

            // 设置位置和其他属性...
            particle.style.left = `${x}px`;
            particle.style.top = `${y}px`;

            // 随机化一些参数使每次爆炸不同
            let angle=Math.random()*Math.PI*2;
            let speed=(Math.random()+0.5)*4;
            
            setTimeout(()=>{
                particle.remove();
            }, 1000);

            // 应用变换矩阵模拟运动轨迹
            particle.style.transformOrigin='center center';
            particle.style.animationTimingFunction=`cubic-bezier(${Math.random()},${Math.random()},${Math.random()},${Math.random()})`;
            particle.style.transform=`translate(-50%, -50%) rotate(${angle}rad) translateX(${speed}px)`;
        }
    };

    window.onclick = event => {
        createFirework(event.clientX,event.clientY);
    };
});

此段脚本会在点击窗口任意处触发一次烟花爆炸效果，通过`createFirework()`函数来生成多个随机分布的小颗粒，并赋予它们不同的移动路径与速度，从而形成绚丽多彩的视觉体验。