图片精灵图辅助定位器 - 单击获取CSS坐标
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
UD5工具箱
上传精灵图,自动切片检测或手动框选获取背景定位数值,生成CSS Sprite代码。
将照片转为安迪·沃霍尔风格的丝网印刷波普四宫格,可替换每个格子的色彩。
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果,营造怀旧氛围。
基于Bcrypt算法的密码安全哈希,可调节工作因子,适合存储用户密码时的单向加密演示。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
输入 HTML 或网址,提取所有标题标签,生成文档大纲树,检测跳跃和缺失。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
在预设向量场中点击放置种子,绘制通过该点的流线,表现场的方式。
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
将分子和分母约分为最简分数,同时显示带分数格式及小数近似值。
输入分数,计算其小数形式,用标记高亮循环节部分。
在线生成Lorem Ipsum占位文本,可指定段落数、单词数或字节数,用于设计排版和布局填充。
调整透明度、模糊度和边框,实时预览毛玻璃UI卡片,生成兼容CSS backdrop-filter代码。
可视化配置范围滑块的轨道、滑块、填充颜色,生成跨浏览器的CSS代码。
在线生成可折叠的手风琴面板,自定义标题、内容与图标,支持纯CSS或简单JS切换。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
在虚拟面包板上拖拽跳线、电阻等元件,预演电路搭建。
将 JSON 数组或对象渲染为可交互的 HTML 表格,支持嵌套展开、列排序和搜索。
拖拽基色指针,自动计算互补、近似、三等分等七种和谐配色方案,复制十六进制值。
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
用Canvas绘制经典的洛伦兹吸引子轨迹,可拖拽旋转视角展示蝴蝶形奇怪吸引子。
以3D渲染(p,q)环面纽结,可旋转视角,感受拓扑之美。
在任意网页上投射可拖拽调整的栅格覆盖线,用来测量和对齐设计稿。