全站通知：
Widget:Fireworks
刷
历
编
跳到导航
跳到搜索
简介
- 基于 [fireworks-js](https://fireworks.js.org/) 库实现的烟花特效，支持自定义配置。
- 注：使用深色背景效果更佳
安装
<includeonly><style type="text/css">
.fireworks {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
user-select: none;
z-index: 99999; /* 置于页面背后则改为-1 */
}
</style>
<script type="text/javascript" src="https://wiki.biligame.com/tools/index.php?title=MediaWiki:Fireworks.js&action=raw&ctype=text/javascript"></script>
<script type="text/javascript">
var fireworksDiv = document.createElement('div');
fireworksDiv.className = 'fireworks';
document.body.appendChild(fireworksDiv);
const container = document.querySelector('.fireworks');
const fireworks = new Fireworks.default(container);
fireworks.start();
</script></includeonly><noinclude>{{#widget:Fireworks}}</noinclude>
使用
对应页面输入
{{#widget:Fireworks}}
扩展应用-更改烟花效果
- 可前往 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)
- 注：bwiki平台暂不支持
使用示例
- 你可以根据需要调整这些参数来实现不同的烟花效果。较小的重力值会使烟花下落更慢，较大的粒子数量会使爆炸效果更绚丽，调整色相范围可以限制烟花的颜色等。
- 使用自定义参数
<script type="text/javascript">
var fireworksDiv = document.createElement('div');
fireworksDiv.className = 'fireworks';
document.body.appendChild(fireworksDiv);
const container = document.querySelector('.fireworks');
// 烟花配置
const fireworks = new Fireworks.default(container, {
// 核心参数
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方形
// 声音效果
sound: {
enabled: false // 是否启用声音效果
},
// 颜色
hue: {
min: 0, // 色相最小值（0-360）
max: 360 // 色相最大值（0-360）
},
// 发射与延迟
delay: {
min: 100, // 最小发射延迟（官方默认: 30ms）
max: 200 // 最大发射延迟（官方默认: 60ms）
},
// 发射位置和边界（可选，用于限制烟花范围）
rocketsPoint: {
min: 0, // 发射位置最小X坐标
max: 100 // 发射位置最大X坐标
},
boundaries: {
x: 0, // 边界左上角X坐标
y: 0, // 边界左上角Y坐标
width: window.innerWidth, // 边界宽度
height: window.innerHeight // 边界高度
},
// 线条宽度
lineWidth: {
explosion: {
min: 1, // 爆炸粒子最小宽度
max: 2 // 爆炸粒子最大宽度（官方默认: 3）
},
trace: {
min: 0.5, // 上升轨迹最小宽度（官方默认: 1）
max: 1 // 上升轨迹最大宽度（官方默认: 2）
}
},
// 亮度
brightness: {
min: 60, // 亮度最小值（官方默认: 50）
max: 90 // 亮度最大值（官方默认: 80）
},
// 衰减效果
decay: {
min: 0.010, // 最小衰减速度（官方默认: 0.015）
max: 0.015 // 最大衰减速度（官方默认: 0.03）
},
// 鼠标交互
mouse: {
click: false, // 是否允许点击触发（官方默认: false）
move: false, // 是否允许鼠标移动触发
max: 1 // 同时触发数量（官方默认: 3）
}
});
fireworks.start();
</script>
- 页面效果 Widget:Fireworks/1
沪公网安备 31011002002714 号