CSS 动画曲线编辑器 - 贝塞尔可视化重定义
拖动曲线手柄调整动画缓动,实时预览弹跳或淡入效果,生成cubic-bezier值。
等轴测绘图板 - 像素级艾索风格建造
在等轴测网格上绘制建筑或场景,支持多图层及调色板,导出等轴测像素艺术作品。
大型 ASCII 横幅生成器 - FIGlet 多字体选择
输入文字并选择 FIGlet 字体,生成大型 ASCII 艺术字横幅,用于代码注释或说明。
滚动捕捉沙盒 - CSS Scroll Snap实验
调整滚动容器和子项的对齐方式、停止点,观察CSS Scroll Snap平滑滑动效果。
首屏关键CSS提取工具 - 可视化选取折叠之上样式
粘贴HTML和CSS,工具将尝试分析并为你抽取首屏内联样式,辅助性能优化。
系统强调色预览 - 在不同控件上的表现
动态调整 accent-color 并实时查看对复选框、单选按钮、进度条和滑块的影响。
SVG路径生成器 - 手绘贝塞尔曲线代码
在画布上通过控制点绘制曲线与直线,生成对应的SVG <path> d属性字符串,方便插画引用。
谐振螺旋图 - 利萨茹曲线绘制
调整X和Y方向的频率和相位,绘制多样的利萨茹曲线图案。
Data URL解析查看器 - 预览/下载/解构
粘贴以data:开头的链接,自动判断MIME类型并预览内容,或提供下载按钮。
图片尺寸调整工具 - 在线放大缩小图片尺寸
通过Canvas调整图片的宽度和高度,支持保持比例或自定义尺寸,快速修改图片分辨率并下载。
CSS accent-color 预览器 - 统一表单控件强调色
调整 accent-color 值,实时查看单选框、复选框、进度条等原生控件的主题变化。
内容感知缩放演示 - 缝线消除缩小图片
使用Seam Carving算法逐步移除图片中不重要的像素线以缩小尺寸,前端模拟教学。
CSS 背面可见性演示 - 卡片翻转效果调试
制作一张 3D 翻转卡片,切换 backface-visibility 属性观察背面隐藏与否。
CSS 容器查询实验室 - 基于卡片宽度的响应式布局
拖拽改变容器宽度,观察使用container-type和@container规则的元素如何自适应样式。
Sitemap链接提取器 - 从XML解析所有URL
粘贴Sitemap XML内容,解析并列出所有包含的URL地址。
图像隐写解码器 - 最低有效位LSB提取
上传疑似隐写图片,提取每个像素的最低位,尝试恢复隐藏的文本或数据。
URL解析工具 - 在线分析URL组成
分解URL为协议、主机、端口、路径、查询字符串和哈希等各个组成部分,便于理解与调试。
多样式骨架屏生成器 - 卡片/列表/表格
选择卡片、列表或表格布局,生成对应的灰色闪烁骨架屏HTML/CSS代码。
精灵图分割器 - 将合图拆成单帧小图
上传合并的精灵图,设定行数和列数,自动裁切为单独的小图并打包下载。
Open Graph 标签在线调试器 - 富媒体预览模拟
输入URL提取OG标签,模拟Facebook/Twitter/LinkedIn卡片显示效果,优化链接分享。
JSON展平工具 - 嵌套对象转为单层键值
将深度嵌套的JSON对象转化为用点号或括号分隔的单层键值对,便于数据清洗。
条形码在线解码器 - 摄像头/图片读取条码
支持Code128、EAN等常见一维码的摄像头实时解读或从图片识别,显示编码数字。
屏幕录制轻量工具 - MediaRecorder API 录制
利用浏览器原生API录制屏幕共享或窗口,选择音频源,导出为WebM视频。
链接关系图谱生成 - 思维导图式网页
输入网址,抓取该页面上的出入链接并绘制成节点关系草图。
十字绣图案查看器 - 图片转色块网格
上传图片,转换为带颜色和符号的网格图,辅助制作十字绣图纸。
基数排序动画 - LSD方法逐步可视化
随机生成整数数组,逐步展示按低位优先进行的基数排序过程,辅助算法理解。
加载动画合集 - 数10种纯CSS Spinner预览
浏览数十种纯CSS加载旋转器,点击复制代码或自定义颜色尺寸,节省开发时间。
CSS Sprite生成器 - 图片合并与定位代码生成
上传多张小图标,自动合并成一张Sprite图,并生成对应CSS背景定位代码,提升加载性能。
structuredClone 可转移对象演示 - 高性能深拷贝
对比结构化克隆与传统深拷贝,演示 ArrayBuffer 等可转移对象如何提升性能。
CTF 杂项编解码工具箱 - 丰富格式按层解开
集成ASCII/Hex/Base家族/Quoted-Printable/UUencode等多种编码一键互转,支持智能识别与链式解码。
UD5工具箱