css烟花特效

/* CSS烟花特效 */

/* 设置HTML和BODY的基本样式 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* 创建烟花容器 */
#fireworks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 定义烟花的基本样式 */
@keyframes explode {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(5);
        opacity: 0;
    }
}

.firework {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: explode 1s forwards;
}

/* 使用JavaScript动态创建烟花效果 */
<script>
// JavaScript代码用于动态生成烟花效果
function createFirework(x, y) {
    const firework = document.createElement('div');
    firework.classList.add('firework');
    firework.style.left = `${x}px`;
    firework.style.top = `${y}px`;
    document.getElementById('fireworks').appendChild(firework);

    setTimeout(() => {
        firework.remove();
    }, 1000);
}

document.addEventListener('click', (event) => {
    createFirework(event.clientX, event.clientY);
});
</script>

<!-- 烟花容器 -->
<div id="fireworks"></div>

解释说明：

1. HTML和BODY的基本样式：设置页面的背景为黑色，并确保页面没有滚动条。
2. 烟花容器 (#fireworks)：创建一个绝对定位的容器，覆盖整个页面，用于放置烟花元素。
3. 动画 (@keyframes explode)：定义烟花爆炸的效果，从一个小点逐渐放大并消失。
4. 烟花元素 (firework)：每个烟花是一个白色的小圆点，使用CSS动画实现爆炸效果。
5. JavaScript部分：通过点击事件在鼠标点击的位置动态创建烟花元素，并在1秒后移除。

你可以将上述代码复制到HTML文件中运行，点击页面即可看到烟花效果。