SVG 精灵图合并工具 - 多个 SVG 图标合成一张
上传多个 SVG 文件,合并为一个 SVG sprite 并生成使用示例代码,减少 HTTP 请求。
UD5工具箱
上传多个 SVG 文件,合并为一个 SVG sprite 并生成使用示例代码,减少 HTTP 请求。
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
将照片转为安迪·沃霍尔风格的丝网印刷波普四宫格,可替换每个格子的色彩。
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果,营造怀旧氛围。
输入一个多参数函数,自动生成柯里化版本并演示逐步传参调用的过程。
载入简单控制网格,执行 Catmull-Clark 细分一次,观察光滑效果。
基于Bcrypt算法的密码安全哈希,可调节工作因子,适合存储用户密码时的单向加密演示。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
输入 HTML 或网址,提取所有标题标签,生成文档大纲树,检测跳跃和缺失。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
快速生成指定段落数或字数的 Lorem Ipsum 占位文本,适用于 UI 设计、排版测试和原型填充。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
编写嵌套函数并单步执行,直观展示每个函数的作用域和闭包变量。
在预设向量场中点击放置种子,绘制通过该点的流线,表现场的方式。
上传图片并设置层位置和滚动速度,生成纯 CSS 的多层视差滚动背景代码。
通过 iframe 或 Web Components 将多个独立前端应用组合到同一个页面,展示微前端概念。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
将分子和分母约分为最简分数,同时显示带分数格式及小数近似值。
输入分数,计算其小数形式,用标记高亮循环节部分。
在线生成Lorem Ipsum占位文本,可指定段落数、单词数或字节数,用于设计排版和布局填充。
调整透明度、模糊度和边框,实时预览毛玻璃UI卡片,生成兼容CSS backdrop-filter代码。
可视化配置范围滑块的轨道、滑块、填充颜色,生成跨浏览器的CSS代码。
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
在虚拟面包板上拖拽跳线、电阻等元件,预演电路搭建。