UD5工具箱
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
样式配置
0/80
注：纯CSS仅支持hover，click/focus需JS辅助
实时预览 (Tooltip始终可见以便调试)
这是一个提示信息
配置参数后，上方气泡实时更新。实际使用中tooltip默认隐藏，hover时显示。
生成代码
常见问题与相关知识
什么是纯CSS Tooltip？
纯CSS Tooltip是利用CSS伪元素（::before和::after）配合attr()函数实现的提示框。它不需要任何JavaScript，完全通过CSS控制样式、位置和动画。使用data-*属性存储提示文本，hover时自动显示，性能优异且代码简洁。
移动端使用Tooltip需要注意什么？
移动端没有hover事件，纯CSS tooltip在移动端无法正常触发。建议：①使用click触发替代hover；②为移动端提供触摸友好的替代方案（如Popover）；③确保tooltip内容在移动端也能通过其他方式获取（如aria-label辅助阅读）。
Tooltip和Popover有什么区别？
Tooltip通常用于简短提示（1-5个词），内容简洁，hover触发，不包含交互元素。Popover则承载更多内容（标题+正文+按钮），通常click触发，可包含链接、表单等交互元素。Tooltip更轻量，Popover功能更丰富。
如何让Tooltip支持无障碍访问？
为触发元素添加aria-describedby或aria-label属性，确保屏幕阅读器能读取提示内容。使用role="tooltip"标识tooltip元素。避免仅通过颜色传达信息，确保对比度符合WCAG标准（至少4.5:1）。
Tooltip性能优化建议
纯CSS tooltip性能极佳，无需JS计算。优化要点：①使用will-change或transform进行动画（GPU加速）；②避免在tooltip中使用复杂选择器；③合理设置z-index避免层叠问题；④对大量tooltip使用事件委托（JS方案时）。
如何自定义Tooltip箭头？
常见箭头实现方式：①border三角形技法（利用透明border）；②旋转正方形（transform:rotate(45deg)）；③使用SVG或clip-path。本工具使用旋转正方形法，简单可靠，箭头颜色自动与tooltip背景色保持一致。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
纯CSS提示框生成器 - 鼠标悬停气泡代码
自定义箭头方向、颜色、大小和动画，生成无需JavaScript的纯CSS tooltip组件代码。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框，实时预览毛玻璃UI卡片，生成兼容CSS backdrop-filter代码。
Popover弹窗生成器 - 纯HTML声明式弹出层
配置内容和位置，生成使用最新HTML popover属性的轻量弹窗代码，无需JavaScript。
@property 规则演示 - 自定义属性类型与动画
注册带类型的 CSS 自定义属性，观察其如何支持过渡动画和继承效果。
内联样式提取合并工具 - 汇总 style 属性为类
提取 HTML 中所有内联 style，智能合并相同样式生成 class，并替换为类名以减小体积。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
CSS进度条生成器 - 自定义颜色/圆角/动画
调节宽度、颜色、条纹动画等参数，实时预览并生成进度条HTML/CSS。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
CSS 自定义属性演练场 - 动态修改 var() 看效果
定义多个 CSS 自定义属性，通过滑块或颜色选择器实时修改并查看页面整体风格变化。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
滚动文字横幅生成器 - 替代 marquee 标签
设置文字、速度和方向，生成使用 CSS 动画实现的滚动横幅代码。
Dialog 元素生成器 - 原生模态框样式定制
可视化配置<dialog>元素外观与行为，生成现代化、无障碍友好的模态框代码。
Cypress 测试场景构建器 - 点选生成测试代码
可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
CSS Reset代码生成器 - 统一默认样式重置
勾选或调整所需的重置元素（盒模型、边距等），生成自定义CSS Reset片段，确保跨浏览器一致性。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容，合并生成单独CSS文件。
Proxy 对象拦截测试 - 查看 get/set 钩子触发
创建一个 Proxy，定义各种陷阱函数，操作对象时实时显示被拦截的属性和行为。
HTML转JSX工具 - React组件代码转换
将普通HTML标记转换为符合JSX语法的代码，自动处理class→className、行内样式对象化等。