UD5工具箱
Details/Summary 手风琴效果生成 - 纯HTML折叠面板
无需JavaScript，构建纯HTML5折叠面板，添加自定义图标与动画样式，输出语义化代码。
面板结构
还没有面板
预览效果
生成的HTML
已复制！
面板总数：0
最大深度：0
代码行数：0
常见问题
什么是 HTML Details 折叠面板？
<details> 是HTML5原生标签，无需JavaScript即可创建可折叠内容。搭配 <summary> 定义标题，点击即可展开/折叠，SEO友好且无障碍访问。
手风琴模式如何实现？
给同级 <details> 添加相同的 name 属性（Chrome 120+支持），浏览器会自动实现互斥展开。旧版浏览器需配合少量JS实现。
可以嵌套多少层？
理论上无限制。本工具支持无限级嵌套，但建议控制在3-4层以内以保证良好的用户体验和页面性能。
如何让面板默认展开？
在 <details> 标签上添加 open 属性即可。本工具编辑器中每个面板都有"默认展开"选项，勾选后生成的代码会自动包含该属性。
生成的代码可以直接使用吗？
完全可以直接使用。生成的HTML代码是纯净的原生标签，不依赖任何框架或库，复制粘贴到任何网页即可生效。
Details 标签的浏览器兼容性如何？
所有现代浏览器（Chrome、Firefox、Safari、Edge）均已全面支持。IE不支持，但IE已于2022年停止维护，无需担心。
模块化折纸图生成器 - 多单元拼接展开图
设计Sonobe等模块化折纸单元的折叠模式与组装动画，输出折痕图打印。
多样式骨架屏生成器 - 卡片/列表/表格
选择卡片、列表或表格布局，生成对应的灰色闪烁骨架屏HTML/CSS代码。
加载动画合集 - 数10种纯CSS Spinner预览
浏览数十种纯CSS加载旋转器，点击复制代码或自定义颜色尺寸，节省开发时间。
首屏关键CSS提取工具 - 可视化选取折叠之上样式
粘贴HTML和CSS，工具将尝试分析并为你抽取首屏内联样式，辅助性能优化。
纸飞机设计图集 - 叠法步骤图示
展示多种经典纸飞机的叠法步骤静态图，供折纸爱好者参考。
加载旋转器合集 - 数十种纯CSS加载动画
浏览数十种纯CSS实现的加载小动画，点击复制代码直接用于项目。
CSS 背面可见性演示 - 卡片翻转效果调试
制作一张 3D 翻转卡片，切换 backface-visibility 属性观察背面隐藏与否。
内容感知缩放演示 - 缝线消除缩小图片
使用Seam Carving算法逐步移除图片中不重要的像素线以缩小尺寸，前端模拟教学。
纯CSS下拉菜单生成器 - 无限层级嵌套
构建无需JavaScript的多层级下拉菜单，提供HTML结构和CSS样式代码。
加载动画合集 - 纯 CSS 旋转器/骨架屏
展示数十种纯 CSS 的加载动画和骨架屏效果，点击复制代码直接使用。
JSON展平工具 - 嵌套对象转为单层键值
将深度嵌套的JSON对象转化为用点号或括号分隔的单层键值对，便于数据清洗。
大型 ASCII 横幅生成器 - FIGlet 多字体选择
输入文字并选择 FIGlet 字体，生成大型 ASCII 艺术字横幅，用于代码注释或说明。
镶嵌图案生成器 - 交互式密铺平面设计
基于方形或六边形网格，通过变形滑块创建有趣的密铺镶嵌图案。
随机渐变按钮 - 一键获得亮眼CSS按钮
随机生成漂亮的渐变按钮样式，显示对应的CSS代码，可复制或继续随机。
CTF 杂项编解码工具箱 - 丰富格式按层解开
集成ASCII/Hex/Base家族/Quoted-Printable/UUencode等多种编码一键互转，支持智能识别与链式解码。
价格表组件生成器 - 推荐/对比卡片
自定义套餐名、价格、功能列表，生成对比式价格表UI的HTML/CSS代码。
CSS悬停效果生成器 - 按钮/卡片Hover动画
为按钮或卡片配置悬停时的边框、阴影、缩放、颜色等动画，自动生成CSS transition代码。
Protobuf 在线解码器 - 原始字节转可读结构
输入Proto定义和Base64编码的protobuf数据，在线解码为JSON，辅助分析二进制通信内容。
纯CSS评论组件生成 - 嵌套精美样式
生成带嵌套、头像和元数据的纯CSS评论列表样式模板。
CSS 动画曲线编辑器 - 贝塞尔可视化重定义
拖动曲线手柄调整动画缓动，实时预览弹跳或淡入效果，生成cubic-bezier值。
精灵图分割器 - 将合图拆成单帧小图
上传合并的精灵图，设定行数和列数，自动裁切为单独的小图并打包下载。
滚动捕捉沙盒 - CSS Scroll Snap实验
调整滚动容器和子项的对齐方式、停止点，观察CSS Scroll Snap平滑滑动效果。
系统强调色预览 - 在不同控件上的表现
动态调整 accent-color 并实时查看对复选框、单选按钮、进度条和滑块的影响。
最大团问题图例演示 - 穷举搜索与启发式
在无向图上查找最大团，高亮显示顶点，演示回溯或启发式搜索过程。
单选复选美化生成器 - 纯CSS自定义样式
选择模板，调节颜色与动画，生成美观的单选/复选框样式代码。
Open Graph 标签在线调试器 - 富媒体预览模拟
输入URL提取OG标签，模拟Facebook/Twitter/LinkedIn卡片显示效果，优化链接分享。
模态框代码生成器 - 弹窗窗口HTML/CSS生成
配置弹窗标题、内容、按钮和动画效果，一键生成干净的自定义模态框HTML/CSS代码。
SQL 格式化器增强版 - 支持BigQuery/Snowflake方言
适配多种SQL方言的关键词大小写与缩进风格，并可添加注释提示，提升大查询可读性。
Prometheus 指标解析器 - 文本格式转表格
粘贴 Prometheus 指标文本，解析为结构化表格，并支持基本过滤和排序。