UD5工具箱
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
样式配置
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。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
CSS进度条生成器 - 自定义颜色/圆角/动画
调节宽度、颜色、条纹动画等参数，实时预览并生成进度条HTML/CSS。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
Dialog 元素生成器 - 原生模态框样式定制
可视化配置<dialog>元素外观与行为，生成现代化、无障碍友好的模态框代码。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
CSS Reset代码生成器 - 统一默认样式重置
勾选或调整所需的重置元素（盒模型、边距等），生成自定义CSS Reset片段，确保跨浏览器一致性。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容，合并生成单独CSS文件。
HTML转JSX工具 - React组件代码转换
将普通HTML标记转换为符合JSX语法的代码，自动处理class→className、行内样式对象化等。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
CSS Clamp() 生成器 - 最小/首选/最大字体
设定最小、首选、最大三个尺寸及视口范围，生成响应式CSS clamp()表达式。
CSS属性兼容性表格 - 按使用率排序
搜索CSS属性和选择器，展示在主流浏览器的支持版本和全局使用率百分比。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
吸顶导航栏生成器 - 滚动固定顶部CSS
生成使用position:sticky固定在顶部的导航栏代码，含滚动变色等增强效果。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
图片精灵图辅助定位器 - 单击获取CSS坐标
上传精灵图，自动切片检测或手动框选获取背景定位数值，生成CSS Sprite代码。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。