UD5工具箱
双动画模式
支持独立下划线模式和共享滑动下划线模式两种核心方案。独立下划线模式采用纯CSS实现，每个菜单项拥有独立的下划线元素，通过transform: scaleX()配合transition属性实现滑入滑出动画，无需JavaScript代码，代码量极少且渲染性能优异。共享滑动下划线模式通过JavaScript动态计算菜单项的位置和宽度，使单条下划线在不同菜单项之间平滑滑动移动，视觉连贯性更强，适合对动效品质要求较高的场景。两种模式可根据项目需求自由选择。
下划线外观定制
提供丰富的下划线外观配置选项，包括下划线颜色（支持任意HEX/RGB/HSL颜色值）、下划线粗细（像素值精确调节）、下划线样式（实线solid、虚线dashed、点线dotted、渐变色linear-gradient四种）。渐变色样式支持自定义双色渐变方向和色彩搭配，用户可以创建从品牌色到强调色的平滑过渡效果。所有外观参数的调整均支持实时预览，用户无需反复编译代码即可快速迭代设计方案。
滑入方向控制
支持三种下划线滑入方向：从左向右滑入（transform-origin: left）、从右向左滑入（transform-origin: right）、从中间向两侧展开（transform-origin: center）。从左滑入是最常见的导航菜单效果，符合用户的自然阅读习惯；从右滑入适合右对齐菜单或需要制造视觉反差的场景；从中间展开则更具设计感和对称美，适合品牌标识突出的导航设计。方向选择直接影响transform-origin属性的值，工具会自动计算并生成对应的CSS代码。
动画速度与缓动函数
允许用户精确设置动画时长（毫秒级调节）和缓动函数类型。内置支持ease、ease-in、ease-out、ease-in-out、linear等标准CSS缓动函数，同时提供cubic-bezier自定义贝塞尔曲线配置。ease-out缓动使动画在结束时减速，给人以自然的缓冲感；ease-in使动画启动时加速，适合快速响应的交互场景；linear线性过渡则提供匀速的机械感，适合简约风格的设计。用户可以根据品牌调性和交互风格选择最合适的动画节奏。
菜单文字样式配置
除了下划线本身的配置，工具还提供了完整的菜单文字样式设置能力。包括菜单字体大小（rem/px单位）、菜单项间距（padding/margin控制）、默认文字颜色、悬停文字颜色以及字体粗细等参数。这些配套选项确保下划线动画与菜单文字的视觉风格协调统一，避免出现样式割裂的问题。用户无需在外部CSS编辑器中反复调整文字样式，所有配置在同一个界面内一站式完成。
实时预览与预设方案
工具提供实时预览功能，用户每次调整参数后即可在预览区域看到最新的动画效果。内置8种精心设计的预设方案：默认经典（简洁的从左滑入）、中间展开（对称美感）、弹性弹跳（带回弹效果的活泼动画）、渐变色彩（彩色渐变下划线）、粗体强调（加粗文字配合动画）、暗色模式（深色背景适配）等。用户可以一键应用预设方案作为起点，再根据实际需求进行微调，大幅提升设计效率。预览区域支持交互操作，用户可以将鼠标悬停在菜单项上实时体验动画效果。
一键代码复制
完成配置后，工具提供一键复制功能，将生成的CSS代码、HTML结构代码和可选的JavaScript代码分别输出到独立的代码面板中。用户可以单独复制CSS样式代码用于嵌入外部样式表，也可以同时复制完整的HTML/CSS/JS代码片段直接粘贴到页面中使用。代码格式化良好、注释清晰，便于理解和二次修改。对于使用共享滑动下划线模式的用户，工具会自动包含所需的JavaScript逻辑代码，确保复制后即可正常运行。