UD5工具箱
选择预设主题
进入撒花按钮配置器页面后，首先映入眼帘的是主题选择区域。这里提供了彩虹、婚礼、金色、海洋、日落、森林六套预设主题方案供你选择。你可以根据应用场景的特点快速选定一个基础主题，例如为婚礼请柬页面选择婚礼主题，为电商促销页面选择金色主题，为环保活动页面选择森林主题。选定主题后，页面下方的所有配置项都会自动更新为该主题的默认参数值，预览区域也会同步显示对应的撒花效果。如果你只是想要一个快速可用的撒花按钮，选择主题后直接跳到第六步生成代码即可。如果你希望进行更精细的个性化定制，请继续阅读后续步骤。
自定义纸屑颜色
在纸屑颜色配置区域，你会看到五个颜色选择器，分别对应五种不同纸屑粒子的颜色。点击任意一个颜色块会弹出完整的颜色选择面板，你可以通过拖动色相滑块选择基础色调，然后在饱和度和亮度区域内精确定位所需的色彩。颜色选择器下方显示了当前颜色的十六进制色值，你也可以直接输入已知的色值来快速设置。建议将五种颜色设置为同一色系的不同深浅变化，这样纸屑效果会更加和谐统一。如果你的品牌有特定的配色规范，可以将品牌主色和辅助色分别填入不同的颜色槽位。每次修改颜色后，预览区域会立即更新显示新的纸屑颜色效果，帮助你直观判断配色方案是否满意。
配置纸屑参数
纸屑参数配置区域包含数量、形状和大小三个主要设置项。纸屑数量通过滑块调节，范围从50到300，默认值为150个。较少的数量适合轻量级的提示场景，较多的数量则能产生更加震撼的视觉冲击。形状选项提供方形、圆形和混合三种模式，方形纸屑呈现硬朗的几何美感，圆形纸屑更加柔和自然，混合模式则将两者随机组合。纸屑大小控制单个粒子的尺寸，较小的纸屑看起来更加细腻精致，较大的纸屑则更加醒目突出。在调整这些参数时，建议配合预览区域的实时效果进行判断，找到最适合你需求的参数组合。纸屑的视觉效果会受到物理参数的影响，因此在调整完纸屑参数后，建议继续进入物理参数的配置。
调整物理参数
物理参数是控制纸屑运动行为的核心设置，直接决定了撒花动画的动态效果和风格基调。发射角度控制纸屑喷射的初始方向，默认90度表示从正下方垂直向上发射，减小角度会使发射方向偏向左侧或右侧。扩散范围决定了纸屑散开的扇形区域大小，角度越大纸屑分布越分散。初始速度影响纸屑飞出时的力度，速度越快纸屑飞得越高越远。重力加速度让纸屑在上升到最高点后自然下落，数值越大下落速度越快，动画结束越早。漂移风力为纸屑添加横向的飘动效果，正值向右飘负值向左飘，可以模拟自然风的吹拂效果。持续时间控制整个动画从触发到完全消失的总时长，建议设置在2到5秒之间以获得最佳体验。这些参数之间相互关联，调整其中一个可能需要配合调整其他参数才能达到理想效果。
定制按钮样式
按钮样式配置区域让你可以完全控制撒花按钮的外观表现。按钮文字输入框支持自由编辑，你可以输入庆祝、恭喜、撒花、点击庆祝等任意文字内容，也可以使用英文如Celebrate、Woohoo、Party等。背景颜色和文字颜色分别通过颜色选择器设置，建议确保文字与背景之间有足够的对比度以保证可读性。圆角半值控制按钮的圆角弧度，设置为0时按钮为直角矩形，设置为较大值时按钮呈现药丸形状。按钮大小提供预设的尺寸档位并支持微调，小号按钮适合紧凑的页面布局，大号按钮适合需要突出展示的场景。完成按钮样式设置后，切换到预览区域选择不同的触发模式测试按钮的交互效果，确认一切满意后即可进入下一步生成最终代码。
生成并嵌入代码
当所有参数都配置完毕并且预览效果令你满意后，点击页面底部的生成代码按钮。系统会自动生成一段完整的HTML加JavaScript嵌入代码，代码会显示在代码预览区域中。你可以点击复制按钮将代码完整复制到剪贴板。将复制的代码粘贴到你目标网页的HTML文件中合适的位置即可。代码可以放在body标签内的任意位置，通常建议放在页面中你希望按钮显示的位置。如果你的页面使用了内容管理系统，可以在对应的编辑器中切换到HTML模式后粘贴代码。如果页面引用了jQuery或其他框架，无需担心冲突，生成的代码使用原生JavaScript编写，具有良好的兼容性。嵌入完成后刷新页面即可看到撒花按钮的效果，点击按钮就能触发撒花动画。