HTML转Pug工具 - 在线HTML代码转简洁模板
将HTML标记转换为Pug(原Jade)的缩进语法模板,去除尖括号,让模板开发更快速。
Markdown转HTML工具 - 在线MD文档转网页
将Markdown文本即时转换为HTML代码,实时预览样式,直接复制HTML用于网站发布。
Popover API 实例展示 - 无JS的弹出层构建
使用原生HTML Popover属性创建提示、菜单与对话框,展示四种触发方式及样式定制。
HTML 拖放 API 演示 - 文件与元素拖拽交互
通过实例展示原生拖放 API 的使用,包括文件拖拽上传和页面元素排序功能。
HTML转React JSX - 属性转换
将HTML代码转换为兼容React JSX的代码(class→className,style→对象等)。
HTML 输出测试器 - 即时预览代码片段
输入 HTML/CSS/JS 代码,在隔离沙箱中即时渲染,支持控制台捕获。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片,合成spritesheet并生成对应CSS steps()帧动画代码。
纯CSS模态弹窗生成 - 无JS弹出层
利用 `:target` 伪类创建无需JavaScript的弹窗组件,支持关闭按钮和遮罩层。
CSS转Styled Components - 自动生成JS代码
将普通CSS代码转换为Styled Components的模板字符串格式。
Emmet 缩写语法浏览器 - 编写并预览展开
输入 Emmet 缩写,实时显示展开后的 HTML 结构,学习高级 Emmet 技巧。
轮播图代码生成器 - 滑动幻灯片HTML/JS
拖拽添加图片与文字,生成响应式轮播图Slider,支持自动播放和导航点,提供HTML/CSS/JS代码。
分页组件生成器 - 自定义样式与按钮
设置总页数与当前页,生成数字式或省略式分页导航条。
CSS自定义属性注册演示 - @property
通过注册CSS属性的类型和初始值,演示如何让渐变等属性实现平滑动画。
内置Web组件演示 - 原生自定义元素
展示一些常用内置HTML元素和自定义元素例子,提供代码复制。
开关切换按钮生成器 - iOS/Android风格
生成形似iOS或Android的开关切换按钮,支持动画和自定义颜色。
流体字体尺寸生成器 - CSS clamp
输入最小视口和最大视口下的字号,生成利用clamp()的流畅缩放字体规则。
Emoji与JS转义互转 - \u{1F600}形式
在Emoji和它的JavaScript Unicode转义序列(如 \u{1F600})之间进行转换。
滚动条样式预览 - Webkit滚动条美化与代码
交互式调整滚动条宽度、滑块颜色、圆角等,预览容器滚动效果,复制::-webkit-scrollbar代码。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标,模拟在暗色/亮色主题下标签栏的样子。
灵感拼贴板 - 图片随意拖放排版
上传图片随意摆放、缩放、旋转,创建个人愿景或情绪板。
加载打字动画生成 - 三点跳跃CSS
生成经典的“...”打字机加载动画,可定颜色和大小,纯CSS实现。
流体排版 CSS 生成器 - clamp() 函数计算
输入最小/最大字体大小和视口范围,生成精确的 clamp() 值及回退方案。
DOM元素截图工具 - 指定区域导出图片
选中页面上的某个HTML元素,利用html2canvas将其渲染为PNG图片下载。
常用表单片段库 - 登录/注册/搜索等
预置多种常见表单(登录、联系、搜索)的HTML代码,点击即可复制并稍作修改。
表单代码生成器 - 拖拽式HTML表单构建
拖拽文本框、下拉框、单选复选等元素,排列组成表单,导出整洁的HTML表单结构代码。
文字编织花样预览器 - 上/下针符号转图案
输入文字描述或符号(如K, P),生成编织花样预览图,方便织女试读图解。
CSS三角形生成器 - 纯CSS三角箭头在线生成
在线生成纯CSS三角形、箭头、气泡指示器,调整方向、大小和颜色,一键复制CSS代码。
文字情绪板生成器 - 关键词配色与排版
输入代表情绪的关键词,自动匹配配色方案和字体样式,生成情绪板卡片。
CSS图案生成器 - 条纹/格子/圆点背景代码
选择条纹、网格、波点等预设图案,调节颜色和尺寸,生成纯CSS background代码。
网页CSS变量提取为色板 - 一键查看站点主题色
输入网址,提取页面定义的所有CSS自定义属性(颜色),生成直观调色板。
UD5工具箱