以下是实现烟花绽放效果的核心CSS代码，包括元素的创建、样式定义以及JavaScript中的动画控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
overflow: hidden;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.fireworks {
position: absolute;
--c: #fff;
--size: 2px;
--speed: 500ms;
--duration: 10s;
--delay: 0s;
--easing: linear;
}
.fireworks-item {
position: absolute;
width: var(--size);
height: var(--size);
background: var(--c);
animation: fly var(--speed) var(--easing) infinite;
opacity: 0;
r: 100;
}
@keyframes fly {
0% {
opacity: 0;
r: 100;
}
100% {
opacity: 1;
r: 10;
}
}
</style>
</head>
<body>
<script>
const fireworks = (c, n, size, speed, duration, delay) => {
const fireworks = document.createElement('div');
fireworks.className = 'fireworks';
Object.assign(fireworks.style, {
'--c': c,
'--size': `${size}px`,
'--speed': `${speed}ms`,
'--duration': `${duration}ms`,
'--delay': `${delay}ms`,
});
for (let i = 0; i < n; i++) {
const fireworksItem = document.createElement('div');
fireworksItem.className = 'fireworks-item';
fireworks.appendChild(fireworksItem);
}
document.body.appendChild(fireworks);
};
fireworks('#FFF', 100, 2, 500, 10000, 0);
</script>
</body>
</html>这段代码创建了一个名为 .fireworks 的元素，并给它添加了一百个 .fireworks-item 作为烟花的粒子。每个烟花粒子都是一个 div，通过CSS动画从全透明到完全可见，大小从2px变化到10px，并且在屏幕上随机移动。通过调整CSS变量，可以快速改变烟花的颜色、大小和数量等特性。