UD5工具箱
图片放大镜效果 - 电商产品放大预览CSS/JS
生成图片局部放大镜效果，可调节镜头大小和放大倍率，输出HTML/CSS/JS交互代码。
经典灰白
深海蓝
森林绿
珊瑚红
暗夜黑
柔和粉
琥珀金
外观设置
阴影与按压
厚度:
淡浓
生成的 CSS
/* 拟物化按钮 - Skeuomorphic Button */
.skeuo-btn {
background: linear-gradient(180deg, #f7f8fa 0%, #dce0e6 100%);
border: 1.5px solid #c5cad3;
border-radius: 12px;
padding: 14px 40px;
font-size: 17px;
font-weight: 700;
color: #3a3f48;
cursor: pointer;
box-shadow: 0 7px 0 #b0b5be, 0 9px 18px rgba(0,0,0,0.18);
transform: translateY(0);
transition: all 0.12s cubic-bezier(0.2,0.8,0.4,1);
}
.skeuo-btn:active {
box-shadow: 0 2px 0 #b0b5be, 0 3px 6px rgba(0,0,0,0.1);
transform: translateY(5px);
background: linear-gradient(180deg, #e8eaef 0%, #d0d5dc 100%);
}
常见问题 & 知识点
什么是拟物化设计（Skeuomorphism）？
拟物化设计是一种UI设计风格，通过模仿现实世界中物体的质感、光影和材质来创建界面元素。按钮看起来像真实的物理按钮，具有明显的立体感、阴影和高光。这种风格在早期iOS（iOS 6及之前）中广泛使用，近年来随着"新拟物化"（Neumorphism）的兴起又重新受到关注。拟物化按钮的核心在于多层box-shadow和渐变背景的配合，营造出凸起和可按压的视觉错觉。
拟物化按钮按压效果的核心CSS属性是什么？
核心属性包括：
1. box-shadow — 使用多层阴影创建厚度和深度，如
2. transform: translateY() — 在:active状态下向下移动按钮，模拟被按下的位移；
3. 渐变背景 — 使用linear-gradient模拟光源照射（顶部稍亮、底部稍暗）；
4. transition — 让按压动画平滑流畅，通常设置为0.1s-0.15s以获得即时反馈感。
1. box-shadow — 使用多层阴影创建厚度和深度，如
0 7px 0 #b0b5be, 0 9px 18px rgba(0,0,0,0.18)；2. transform: translateY() — 在:active状态下向下移动按钮，模拟被按下的位移；
3. 渐变背景 — 使用linear-gradient模拟光源照射（顶部稍亮、底部稍暗）；
4. transition — 让按压动画平滑流畅，通常设置为0.1s-0.15s以获得即时反馈感。
如何让按压效果更加逼真自然？
提升逼真度的关键技巧：
• 多层阴影：使用硬阴影（无模糊）模拟底部厚度 + 软阴影（大模糊半径）模拟环境光遮挡；
• 按压缩小阴影：:active时将阴影偏移从7px减至2px，扩散阴影也成比例缩小；
• 渐变动态调整：按压时反转或压缩渐变，模拟表面被压平；
• 合适的缓动函数：使用cubic-bezier(0.2, 0.8, 0.4, 1) 模拟物理按压的加速度曲线；
• 保持短过渡：0.08s-0.15s的过渡时间最接近物理按钮的反馈速度。
• 多层阴影：使用硬阴影（无模糊）模拟底部厚度 + 软阴影（大模糊半径）模拟环境光遮挡；
• 按压缩小阴影：:active时将阴影偏移从7px减至2px，扩散阴影也成比例缩小；
• 渐变动态调整：按压时反转或压缩渐变，模拟表面被压平；
• 合适的缓动函数：使用cubic-bezier(0.2, 0.8, 0.4, 1) 模拟物理按压的加速度曲线；
• 保持短过渡：0.08s-0.15s的过渡时间最接近物理按钮的反馈速度。
拟物化按钮 vs 扁平化按钮 vs 新拟物化（Neumorphism）有什么区别？
扁平化（Flat Design）：几乎没有阴影和渐变，纯色背景，极简风格，如Material Design的早期版本。
拟物化（Skeuomorphism）：明显的3D立体效果，厚重的阴影、渐变和高光，模仿真实物理按钮。
新拟物化（Neumorphism）：介于两者之间，使用柔和的内外阴影创建"浮雕"效果，按钮似乎从背景中"浮起"，通常阴影更柔和，对比度较低。新拟物化在2020年左右流行，但因可访问性问题（对比度不足）使用场景有限。
拟物化（Skeuomorphism）：明显的3D立体效果，厚重的阴影、渐变和高光，模仿真实物理按钮。
新拟物化（Neumorphism）：介于两者之间，使用柔和的内外阴影创建"浮雕"效果，按钮似乎从背景中"浮起"，通常阴影更柔和，对比度较低。新拟物化在2020年左右流行，但因可访问性问题（对比度不足）使用场景有限。
如何在生产环境中使用生成的CSS代码？
1. 复制生成的CSS代码到你的样式文件中；
2. 在HTML中给按钮添加class="skeuo-btn"；
3. 如需多个不同颜色的按钮，可以创建变体类（如.skeuo-btn-blue），修改background、border和box-shadow中的颜色值；
4. 注意按钮文字颜色与背景的对比度，确保符合WCAG可访问性标准（对比度至少4.5:1）；
5. 如果页面有深色背景，预览区支持切换背景查看效果；
6. 建议保留transition属性以保证按压动画的流畅性。
2. 在HTML中给按钮添加class="skeuo-btn"；
3. 如需多个不同颜色的按钮，可以创建变体类（如.skeuo-btn-blue），修改background、border和box-shadow中的颜色值；
4. 注意按钮文字颜色与背景的对比度，确保符合WCAG可访问性标准（对比度至少4.5:1）；
5. 如果页面有深色背景，预览区支持切换背景查看效果；
6. 建议保留transition属性以保证按压动画的流畅性。
为什么我复制代码后按压效果不流畅？
常见原因：
• 缺少transition属性 — 确保按钮有transition: all 0.1s-0.15s；
• box-shadow在:active中未正确缩减 — 按压时阴影偏移应减少到原值的25%-35%；
• transform未设置或与box-shadow不同步 — translateY位移量应约等于阴影深度的60%-70%；
• 其他CSS覆盖了样式 — 检查是否有全局样式重置了box-shadow或transform；
• 在移动端测试 — iOS Safari对:active的处理可能有所不同，建议同时绑定touchstart/touchend事件增强移动端体验。
• 缺少transition属性 — 确保按钮有transition: all 0.1s-0.15s；
• box-shadow在:active中未正确缩减 — 按压时阴影偏移应减少到原值的25%-35%；
• transform未设置或与box-shadow不同步 — translateY位移量应约等于阴影深度的60%-70%；
• 其他CSS覆盖了样式 — 检查是否有全局样式重置了box-shadow或transform；
• 在移动端测试 — iOS Safari对:active的处理可能有所不同，建议同时绑定touchstart/touchend事件增强移动端体验。
box-shadow多层阴影的工作原理是什么？
CSS的box-shadow支持用逗号分隔多个阴影值，渲染时按从后到前的顺序叠加（最后写的在最底层）。拟物化按钮通常使用2-3层阴影：
• 第1层（最前）：
• 第2层：
• 第3层（可选）：更小的inset阴影在:active时出现，模拟表面凹陷。
这种分层方法比单层阴影更能营造真实的立体感。
• 第1层（最前）：
0 Xpx 0 深色 — 无模糊的硬阴影，紧贴按钮底部，模拟"厚度"；• 第2层：
0 (X+2)px (X+4)px rgba(0,0,0,0.2) — 有模糊的软阴影，模拟环境光被遮挡；• 第3层（可选）：更小的inset阴影在:active时出现，模拟表面凹陷。
这种分层方法比单层阴影更能营造真实的立体感。
手写体文本生成 - 随机真人手写风格图片
利用内置手写字体库将文字渲染为逼真的手写笔记图片，可调节倾斜度和颜色。
机械键盘音效模拟器 - 按键发声打字机风格
在网页上打字时播放机械键盘或打字机音效，支持多种音色，提升打字体验。
焦点指示器可见性检查 - 模拟键盘 Tab 导航轮廓
在可聚焦元素间 Tab 切换，高亮显示默认焦点轮廓，检查自定义样式是否提供可见指示。
焦点陷阱测试工具 - 检测模态框是否困住 Tab
激活模态框后，模拟 Tab 和 Shift+Tab，验证焦点是否被正确限制在对话框内。
反应扩散系统模拟器 - Gray-Scott 模型图案生成
运行 Gray-Scott 反应扩散模型，调节参数生成斑点、条纹等生物斑图。
推特文截图生成器 - 模拟推文图片
填入头像、用户名、内容和点赞数，生成看起来像真实推文截图的图片。
反应扩散系统模拟 - 图灵图案生成
运行Gray-Scott反应扩散模型，生成类似动物毛皮或化学斑图的复杂纹理。
滚动文字效果生成器 - 入场滑入动画
配置文字从下/左等方向滑入，随页面滚动触发，生成Intersection Observer+CSS动画代码。
图片热力图生成器 - 点击位置密度图
上传图片，记录用户在图片上的点击位置，生成点击热度分布伪彩图。
响应式图片尺寸生成 - srcset/sizes
为同一图片的不同分辨率版本自动生成srcset和sizes属性代码。
JSON Schema 假数据生成器 - 按定义创建莫克数据
定义JSON Schema结构，自动填充符合类型与格式的随机数据，支持导出大文件用于压力测试。
涟漪触摸效果生成器 - Material点击波纹
生成触击按钮时水波扩散的CSS动画及事件绑定代码，增强移动端反馈。
浏览器扩展图标生成 - 多尺寸一键输出
上传一个主图标，同时生成16x16至128x128的所有标准浏览器扩展图标尺寸。
占位图服务模拟器 - 本地生成指定尺寸图片
通过 Canvas 生成任意宽高的占位图，显示尺寸文字，可复制 Base64 或使用 Blob URL 模拟服务。
3D卡片翻转生成器 - 鼠标悬停立体旋转
设置卡片正面和背面内容，生成鼠标悬停时沿X轴或Y轴3D翻转的CSS动画。
图像挤压/膨胀滤镜 - 局部变形工具
像哈哈镜一样，鼠标滑动对图片局部进行实时的膨胀或挤压变形。
仿制图章工具 - 取样复制像素修复
Alt+点击取样，然后在其他区域绘制，复制取样点的像素，用于去除瑕疵。
屏幕共享模拟器 - 移动端预览当前页面
以手机框架包裹当前网页视图，可调宽高，模拟实际移动端显示效果。
响应式图片断点生成器 - 自动生成 srcset 尺寸
上传图片，选择需要覆盖的视口宽度，生成对应的 srcset 属性和不同尺寸图片。
折纸模拟器 - 虚拟折叠纸鹤
拖拽纸张边角，通过简单3D模拟体验折纸鹤的过程。
环形缓冲区动画演示 - 读写指针运动
动画展示环形/循环缓冲区的Enqueue、Dequeue操作以及头尾指针的移动逻辑。
简易纸模型展开图生成 - 3D形状展开
选择立方体、金字塔等基本形状，生成可打印的纸模型展开图模板。
图片转涂色页 - 生成线稿供打印填色
上传照片，自动边缘检测生成黑白线稿，可作为涂色页打印出来。
随机CSS图案生成器 - Doodle背景图
一键随机生成用纯CSS(带渐变和阴影)绘制的艺术背景图案，附带代码。
虚拟陀螺旋转 - 摩擦减速模拟
点击或滑动让一个陀螺高速旋转，逐渐因摩擦力减慢直到停止，模拟解压玩具。
移轴摄影模拟器 - 模糊上下创造微缩世界
在图片上设置平行模糊区域，模拟移轴镜头的浅景深效果，使场景像模型。
打印友好按钮生成器 - 一键隐藏打印无关内容
生成一个按钮脚本，点击时自动隐藏导航等元素并应用打印样式，优化页面打印。
自定义视口模拟器 - 任意像素尺寸预览
手动输入宽度和高度像素值，生成一个模拟窗口查看内容适配状况。
定制占位图生成器 - 文字/尺寸/颜色精确
精确设置宽高、背景底色、文字内容及字号，生成完美占位图并下载。