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

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

71
0
0
0

六套精美预设主题

配置器内置彩虹、婚礼、金色、海洋、日落、森林六大主题方案,每套主题都经过专业设计师精心调配。彩虹主题包含赤橙黄绿青蓝紫七种高饱和度颜色,适用于各类欢乐庆祝场景。婚礼主题采用粉色、白色、金色的柔和搭配,营造浪漫优雅的视觉氛围。金色主题使用深浅不同的金色系,呈现奢华尊贵的质感。海洋主题选取蓝色和青色的冷色调组合,带来清爽活力的感觉。日落主题融合橙色到紫色的暖色渐变,营造温馨绚烂的效果。森林主题以绿色系为主搭配自然色调,传递清新环保的理念。用户可以一键切换主题快速预览效果,也可以在主题基础上进行个性化微调。

五色纸屑自定义

用户可以独立配置五种不同的纸屑颜色,每种颜色都提供完整的颜色选择器支持。通过颜色选择器可以精确指定十六进制色值、RGB值或直接在色盘上选取。支持为纸屑设置渐变色效果,让单个纸屑在飞行过程中呈现颜色过渡。五种颜色的纸屑会随机分配到各个粒子上,形成丰富多彩的视觉效果。用户也可以将五种颜色设为同一色系的不同深浅,创造出层次分明的单色主题效果。

纸屑形状与数量控制

纸屑形状支持方形、圆形和混合三种模式。方形纸屑呈现硬朗的几何美感,圆形纸屑更加柔和自然,混合模式则将两者随机组合产生丰富的视觉层次。纸屑数量提供从50到300的可调范围,默认150个纸屑能在视觉效果和性能之间取得良好平衡。较少的纸屑数量适合轻量级的微妙提示效果,较多的数量则能营造更加震撼的视觉冲击力。用户可以根据页面的整体风格和目标设备的性能水平灵活调整。

完整物理参数调节

配置器提供了完整的物理引擎参数调节能力,让用户能够精细控制纸屑的运动行为。发射角度参数控制纸屑喷射的初始方向,支持从水平到垂直的全角度调节。扩散范围决定了纸屑散开的扇形区域大小,角度越大纸屑分布越分散。初始速度影响纸屑飞出时的力度和飞行距离。重力加速度让纸屑在上升后自然下落,数值越大下落越快。漂移风力为纸屑添加横向飘动效果,模拟微风吹拂的自然感。持续时间参数控制整个动画从开始到完全消失的总时长。这些参数的灵活组合可以创造出从严谨克制到奔放热烈的各种动画风格。

按钮样式全面定制

撒花按钮本身支持全面的样式定制。按钮文字可以自由编辑,支持中英文等多种语言内容。背景颜色和文字颜色通过颜色选择器精确设置,确保按钮风格与网站整体设计保持一致。圆角半径支持从完全方形到完全圆形的连续调节,适配不同的设计风格需求。按钮大小提供小、中、大三个基础尺寸档位,并支持像素级的微调。用户还可以为按钮设置悬停效果和点击反馈,提升交互体验的完整性。

实时预览与多种触发模式

配置器提供所见即所得的实时预览功能,用户在调整任何参数后都能立即看到效果变化。预览区域支持三种触发模式:点击撒花模式让用户通过点击按钮触发单次撒花效果,便于反复测试和调整参数。连发模式模拟自动连续触发的效果,帮助用户观察多次撒花叠加时的视觉表现。侧方发射模式则改变纸屑的发射位置和方向,从页面侧边飞入的纸屑适合特定的布局需求。实时预览大大提升了配置效率,避免了传统方式中反复修改代码再刷新页面的繁琐流程。

轻量级嵌入代码生成

配置完成后,系统自动生成一段纯HTML加JavaScript的嵌入代码,用户只需将这段代码复制粘贴到目标页面即可使用。生成的代码体积约5KB,不依赖任何外部框架或构建工具,仅引用轻量的canvas-confetti库。代码结构清晰且经过优化,不会阻塞页面渲染也不会影响其他脚本的执行。支持通过CDN方式加载依赖库,确保全球范围内的快速访问。生成的代码兼容所有主流浏览器,包括Chrome、Firefox、Safari、Edge等,无需担心兼容性问题。代码中还包含了必要的错误处理和降级方案,确保在特殊环境下也能优雅降级。