有限状态机设计器 - 拖拽绘制状态转换图
拖放创建状态和转换,标注事件与动作,导出为图片或 JSON 定义,用于软件设计。
视频动态缩略图生成器 - 提取片段生成 GIF
选择视频的一个片段,生成几秒钟的 GIF 动图作为预览缩略图,可设置尺寸和帧率。
代码语法高亮工具 - 在线代码美化展示
粘贴代码自动进行语法高亮显示,支持主流编程语言,生成带行号的HTML代码块,方便嵌入博客。
轮播图代码生成器 - 滑动幻灯片HTML/JS
拖拽添加图片与文字,生成响应式轮播图Slider,支持自动播放和导航点,提供HTML/CSS/JS代码。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片,合成spritesheet并生成对应CSS steps()帧动画代码。
代码片段转图片 - 高亮代码导出为美观图片
粘贴代码并选择高亮主题,将代码片段渲染为精美的PNG图片,便于社交媒体分享。
GIF 动画转精灵表生成器 - 按行/列提取帧
上传 GIF 动画,提取每一帧并拼接为单张精灵表图片,可设置排列方式,用于游戏开发。
雷达图生成器 - 多维数据可视化工具
输入多个维度的数值,自动绘制蜘蛛网雷达图,支持多组数据叠加比较。
动态GIF二维码生成器 - 逐帧叠加动画
生成带闪烁或循环色彩的动态GIF二维码,增加扫码趣味性。
CSS动画录制器 - 拖拽元素生成关键帧代码
在时间轴上拖拽一个元素的位置和样式,自动录制并生成对应的CSS @keyframes动画代码。
CSS转Styled Components - 自动生成JS代码
将普通CSS代码转换为Styled Components的模板字符串格式。
基于模式的模拟数据生成器 - 自定义字段与规则
定义字段名称和类型(姓名、邮箱、数字范围等),批量生成符合规则的 JSON 模拟数据。
交互式图像分割演示 - 点击选择对象
使用 SAM 或其他前端模型,点击图片中的对象区域实现像素级分割,体验智能抠图。
浏览器扩展样板代码生成器 - 定制 manifest 与脚本
选择扩展类型(弹出、内容脚本、后台),生成完整的项目文件和 manifest.json。
视频片段转GIF - 选取时间段导出动图
上传视频,截取其中一小段并转换GIF,可调帧率和尺寸,前端转换。
图标字体实时预览 - 输入码点测试大小
粘贴自定义图标字体的Unicode,调节尺寸颜色立即查看效果。
动态 GIF 合成工具 - 多张图片帧合并成 GIF
上传多张图片作为帧,调整每帧延迟,合成并下载动态 GIF,完全浏览器端实现。
图片背景预览器 - 不同UI背景效果模拟
上传图片并在白色、黑色、透明等背景上预览效果,辅助电商首图或UI元素设计。
View Transition 模拟页面切换 - 使用 startViewTransition
在两个视图间切换并调用 document.startViewTransition,观察浏览器默认过渡动画。
数组操作方法性能对比 - map/filter/reduce/for 循环
在同一数据上运行多种数组遍历方式,测量并比较它们的执行时间,辅助性能优化决策。
控制台日志样式生成 - %c美化输出
配置字体、颜色、背景,生成可粘贴到浏览器控制台的%c格式化日志代码。
新拟态调色板 - 根据背景色自动生成凹凸色
选择主背景色,自动推荐浅色高光和深色阴影值,用于新拟态UI。
Import Map 演示 - 浏览器端模块映射实验
编写 HTML 和 import map,在浏览器中直接导入裸标识符模块并执行。
View Transition API 演练场 - 页面切换动画配置
在单页内模拟MPA过渡效果,自定义进场/出场动画,体验View Transitions API丝滑切换。
Emmet 缩写语法浏览器 - 编写并预览展开
输入 Emmet 缩写,实时显示展开后的 HTML 结构,学习高级 Emmet 技巧。
文字动画GIF生成器 - 闪烁/打字效果
输入文字,选择闪烁、打字、彩虹等动态效果,生成文字动画GIF。
数图/逻辑绘图求解器 - 自动解Nonogram
输入行与列的线索数字,自动求解逻辑绘图谜题并显示像素图。
渐变背景合集 - 现成UI Gradient一键复制
精选数百种流行渐变配色,点击即复制CSS代码,用于网页或应用背景。
剪影生成器 - 提取人物/物体轮廓变黑
上传正面照,简单亮度阈值提取剪影,可下载PNG。
暗色模式色板生成器 - 深色UI设计
通过调整深色背景与前景色的对比度,生成符合无障碍标准的深色主题色彩方案。
UD5工具箱