无需登录 数据私有 本地保存

撒花按钮配置器 - 定制五彩纸屑触发器

17
0
0
0

🎊 撒花按钮配置器

自定义五彩纸屑效果 · 实时预览 · 一键生成嵌入代码

预设主题
纸屑颜色 5色
纸屑设置
方形
圆形
混合
物理参数
按钮样式
👆 点击按钮预览效果 · 可反复点击
生成的嵌入代码 — 复制粘贴到你的网页即可使用
正在生成代码...
常见问题 FAQ

五彩纸屑效果是一种在网页上模拟彩色纸片飘落的视觉动画，常用于庆典、成就达成、活动揭晓等场景。本工具基于轻量级的 canvas-confetti 库（仅约5KB），通过HTML5 Canvas渲染高性能粒子动画，支持自定义颜色、形状、发射角度和物理参数，不依赖任何重型框架。

生成的代码是纯HTML+JavaScript，可在任何支持HTML5的网页中使用，包括：WordPress、Shopify、Wix（支持自定义HTML嵌入）、Notion（嵌入HTML区块）、Ghost博客、静态网站（如Hugo/Jekyll）、以及任何自建网站。代码通过CDN引入canvas-confetti库，无需下载任何文件。

生成的代码已自动包含位置计算逻辑：通过 getBoundingClientRect() 获取按钮在屏幕中的位置，计算其相对于视口的坐标作为纸屑发射原点（origin）。这样无论按钮在页面何处，纸屑都会从按钮中心发射。如果需要从页面中心或其他位置发射，可以手动修改origin参数。

canvas-confetti库非常轻量（约5KB gzip压缩后），使用Canvas API高效渲染，单次动画仅持续约2-3秒。在正常参数范围（20-500个纸屑）内，对页面性能影响极小，移动端也能流畅运行。如果纸屑数量设置过高（如超过1000），建议适当降低以保证低端设备体验。动画结束后粒子会自动清理，不会持续占用内存。

发射角度（angle）控制纸屑的主要方向：0°=向右，90°=向上，180°=向左，270°=向下（或使用-90°）。扩散范围（spread）控制扇形宽度，设为360°可实现全方向扩散。配合重力（gravity）和漂移（drift）参数，可模拟风吹效果——正漂移值使纸屑向右飘，负值向左飘。

可以。生成的代码默认绑定点击事件，但你可以轻松修改为自动触发：在生成的<script>中，将confetti调用包裹在window.addEventListener('DOMContentLoaded', ...)中即可实现页面加载时自动撒花。如需延迟触发，可使用setTimeout。也可以同时保留按钮点击和自动触发两种方式。
🔧 相关工具