🦴骨架屏生成器

怎么做骨架屏

1. 按真实布局添加骨架块 —— 带头像的头部、标题、几行文本、图片、按钮 —— 然后拖动排好顺序。
2. 对齐你的设计规范：底色与高光色、圆角、间距、微光速度；切换暗色预览确认两种主题都好看。
3. 复制 HTML 和 CSS，或下载一个独立的演示页面；数据返回后把骨架换成真实内容即可。

常见问题

为什么用骨架屏而不是转圈？

骨架屏提前展示了内容的形状，等待感更短，数据到位时页面也不会跳动。表单提交这类短而不可预测的等待，用转圈更合适。

骨架屏的动画会影响无障碍吗？

建议给骨架容器加 aria-hidden="true"，再用 aria-busy 或 live region 单独播报加载状态。生成的 CSS 也已经在 prefers-reduced-motion 下关闭动画。

怎么让骨架和真实组件对齐？

量一下真实组件：文本条用同样的行高，头像用同样的直径，图片用同样的宽高比。替换时会导致布局跳动的骨架屏，还不如不做。