UD5工具箱
CSS 关键帧时间轴编辑器 - 拖拽属性关键点
在时间轴上拖拽添加属性关键帧，实时预览动画并生成 @keyframes 代码。
CSS动画录制器 - 拖拽元素生成关键帧代码
时长
秒
缓动
⟳
DRAG
位置: --px, --px
关键帧 0%
0 个关键帧
元素属性
旋转
0°
缩放
1.0x
不透明度
100%
背景色
时间轴
0%
生成的CSS代码
// 拖拽元素并添加关键帧来生成CSS动画代码
表单代码生成器 - 拖拽式HTML表单构建
拖拽文本框、下拉框、单选复选等元素，排列组成表单，导出整洁的HTML表单结构代码。
滑动下划线动画生成器 - 菜单悬停特效CSS
配置下划线从中间或一侧滑出的动画，生成无限菜单效果代码。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。
GIF分解精灵图导出 - 提取单帧和CSS定位
上传GIF并自动水平平铺提取各帧，生成对应的CSS精灵图定位代码。
加载打字动画生成 - 三点跳跃CSS
生成经典的“...”打字机加载动画，可定颜色和大小，纯CSS实现。
CSS动画生成器 - Keyframes可视化创建
在线CSS动画代码生成工具，可视化定义关键帧、持续时间、缓动函数等，生成@keyframes动画CSS。
CSS转Styled Components - 自动生成JS代码
将普通CSS代码转换为Styled Components的模板字符串格式。
流体字体尺寸生成器 - CSS clamp
输入最小视口和最大视口下的字号，生成利用clamp()的流畅缩放字体规则。
CSS motion-path 路径动画演示 - 元素沿路径运动
绘制 SVG 路径，让元素沿着路径运动，调整速度和缓动，生成动画代码。
渐变色标数据表 - CSV数据生成渐变CSS
使用CSV格式定义多个色标的位置和颜色，批量生成复杂的CSS渐变代码。
CSS 文字装饰在线编辑器 - 下划线/删除线/波浪线样式定制
调整 text-decoration-line、style、color、thickness 等属性，实时预览文字装饰效果并生成代码。
形状过渡分割线生成 - 页面区块曲线背景
生成用于网页各区块间的波浪或倾斜过渡分割线，导出为SVG或CSS代码。
分页组件生成器 - 自定义样式与按钮
设置总页数与当前页，生成数字式或省略式分页导航条。
CSS图案生成器 - 条纹/格子/圆点背景代码
选择条纹、网格、波点等预设图案，调节颜色和尺寸，生成纯CSS background代码。
纯CSS模态弹窗生成 - 无JS弹出层
利用 `:target` 伪类创建无需JavaScript的弹窗组件，支持关闭按钮和遮罩层。
网页CSS变量提取为色板 - 一键查看站点主题色
输入网址，提取页面定义的所有CSS自定义属性（颜色），生成直观调色板。
常用表单片段库 - 登录/注册/搜索等
预置多种常见表单（登录、联系、搜索）的HTML代码，点击即可复制并稍作修改。
视频片段转GIF - 选取时间段导出动图
上传视频，截取其中一小段并转换GIF，可调帧率和尺寸，前端转换。
控制台日志样式生成 - %c美化输出
配置字体、颜色、背景，生成可粘贴到浏览器控制台的%c格式化日志代码。
DOM元素截图工具 - 指定区域导出图片
选中页面上的某个HTML元素，利用html2canvas将其渲染为PNG图片下载。
HTML实体速查表 - 特殊字符编码Ref
常用HTML实体编码（如© ©）的图形化速查表，点击即可复制实体名称或数字代码。
GIF帧提取器 - 动图分解为单帧图片
上传GIF动图，将所有帧提取出来并打包下载为单个PNG文件，用于修改分析。
动态GIF二维码生成器 - 逐帧叠加动画
生成带闪烁或循环色彩的动态GIF二维码，增加扫码趣味性。
GIF播放速度调节器 - 逐帧减慢或加快
上传GIF，通过滑块改变帧间延迟实时预览变速效果，并下载修改后的动图。
单选框/复选框美化器 - CSS自定义样式
打造自定义形状和颜色的选择框，生成隐藏原生控件并替换样式的完整代码。
开关切换按钮生成器 - iOS/Android风格
生成形似iOS或Android的开关切换按钮，支持动画和自定义颜色。
轮播图代码生成器 - 滑动幻灯片HTML/JS
拖拽添加图片与文字，生成响应式轮播图Slider，支持自动播放和导航点，提供HTML/CSS/JS代码。
CSS自定义属性注册演示 - @property
通过注册CSS属性的类型和初始值，演示如何让渐变等属性实现平滑动画。
代码片段转图片 - 高亮代码导出为美观图片
粘贴代码并选择高亮主题，将代码片段渲染为精美的PNG图片，便于社交媒体分享。