UD5工具箱
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
元素列表
点击上方按钮
添加元素到画布
添加元素到画布
快捷动画预设
属性面板
选择一个元素
以编辑属性
动画列表
选中元素后查看动画
0.00s / 5.00s
总时长:
秒
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
Dialog 元素生成器 - 原生模态框样式定制
可视化配置<dialog>元素外观与行为，生成现代化、无障碍友好的模态框代码。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
<dialog> 元素构建器 - 模态框与表单集成
可视化配置原生 dialog 元素，添加表单并设置方法，生成完整 HTML/CSS/JS 代码。
SVG背景图案集 - 点线/网格/波纹等
提供数十种精致SVG背景纹理，可调颜色，生成CSS背景代码或下载SVG。
手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
SVG转Base64编码 - 内嵌CSS背景
将SVG代码转换为Base64 Data URL，便于直接内嵌入CSS background-image中。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
CSS 自定义属性演练场 - 动态修改 var() 看效果
定义多个 CSS 自定义属性，通过滑块或颜色选择器实时修改并查看页面整体风格变化。
内联样式提取合并工具 - 汇总 style 属性为类
提取 HTML 中所有内联 style，智能合并相同样式生成 class，并替换为类名以减小体积。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
Catmull-Clark 细分曲面演示 - 控制网格迭代
载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。
布局偏移录制器 - 捕捉 CLS 变化并生成动图
监测页面加载过程中的布局偏移，定时截图并合成 GIF，直观展示视觉稳定性问题。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
HTML转JSX工具 - React组件代码转换
将普通HTML标记转换为符合JSX语法的代码，自动处理class→className、行内样式对象化等。
CSS进度条生成器 - 自定义颜色/圆角/动画
调节宽度、颜色、条纹动画等参数，实时预览并生成进度条HTML/CSS。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
范围滑块样式生成器 - 自定义input range外观
可视化配置范围滑块的轨道、滑块、填充颜色，生成跨浏览器的CSS代码。
结构化数据测试 - 粘贴代码实时预览
粘贴结构化数据代码，模拟Google结构化数据测试，检查错误与丰富结果。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
CSS Clip-Path生成器 - 在线裁剪形状代码
拖拽顶点或选择预定义形状，可视生成CSS clip-path多边形、圆形、椭圆等，实时预览并复制代码。
@property 规则演示 - 自定义属性类型与动画
注册带类型的 CSS 自定义属性，观察其如何支持过渡动画和继承效果。
范围滑块预设集 - 复制各种风格range CSS
展示多种风格的<input type=range>样式，一键复制定制代码。