骨架屏按钮需用<button>包裹<span class="btn__content">，设disabled和aria-busy="true"保障语义与无障碍；CSS用伪元素+transform实现高清波浪动画；JS切换时先移属性再更新文本，并配合opacity过渡确保平滑。
骨架屏按钮需要哪些基础 HTML 结构
动态加载的骨架屏按钮，核心是用纯 HTML/CSS 模拟按钮未就绪时的视觉状态，而不是靠 JS 动态插入 DOM。关键在于：结构必须可复用、无障碍友好、且能被 CSS 精确控制尺寸和动画。
最简可行结构是 <button> 包裹一个 <span> 占位元素，而非用 <div> 或 <span> 伪替代按钮语义：
<button class="btn btn--skeleton" disabled aria-busy="true"> <span class="btn__content"></span> </button>
-
disabled防止点击，同时触发原生禁用样式（如灰阶、指针禁用） -
aria-busy="true"告诉屏幕阅读器当前处于加载中，比仅靠视觉更可靠 -
btn__content是唯一被骨架样式作用的子元素，避免直接对<button>应用background动画导致边框/圆角异常
如何用 CSS 实现流畅的波浪骨架动画
常见错误是直接给 btn__content 加 background-image: linear-gradient(...) 并 animate background-position —— 这在高 DPR 屏幕或缩放下容易出现锯齿或偏移。正确做法是用伪元素 + transform 位移，保证硬件加速和清晰度。
推荐方案：
立即学习“前端免费学习笔记（深入）”；
.btn--skeleton .btn__content {
position: relative;
min-width: 1em;
min-height: 1em;
}
.btn--skeleton .btn__content::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
background-size: 200% 100%;
animation: skeleton-wave 2s ease-in-out infinite;
}
@keyframes skeleton-wave {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
- 动画用
transform而非background-position，避免重绘（paint）开销 -
background-size: 200% 100%确保渐变宽度足够覆盖整个区域，否则动画会“断层” - 不要设
width/height固定值在btn__content上，它应由文字内容或min-width自适应，否则骨架宽高会脱离真实按钮尺寸
动态切换骨架与真实内容的 JS 控制要点
切换不是简单地 innerHTML = "提交"，而是要兼顾可访问性、过渡平滑性和防重复触发。
- 用
textContent替代innerHTML更新按钮文本，避免 XSS 风险和 DOM 重建 - 切换前移除
disabled和aria-busy，再更新文本，顺序不能反 —— 否则屏幕阅读器可能先读到新文本，再听到“已禁用” - 加一个
transition: opacity 0.2s在.btn__content上，配合 JS 切换时加 class 控制显隐，比直接 display 切换更利于动画衔接 - 务必在请求完成回调里做清理：清除定时器、取消 pending 状态、恢复 focusable 状态（如有）
示例片段：
function showRealContent(button, text) {
const contentEl = button.querySelector('.btn__content');
button.removeAttribute('disabled');
button.removeAttribute('aria-busy');
contentEl.textContent = text;
contentEl.classList.remove('is-skeleton');
}
响应式与多状态下的兼容陷阱
骨架屏按钮在不同尺寸或主题下容易失效，常见问题集中在尺寸错位和颜色穿透。
- 如果按钮有
padding或border-radius，骨架伪元素必须继承这些值，否则动画区域会溢出或圆角丢失 —— 解决办法是把border-radius写在.btn__content上，而非<button> - 深色模式下，
#e0e0e0可能太亮，建议用CSS custom property统一管理骨架色：--skeleton-bg: #e0e0e0;，并在@media (prefers-color-scheme: dark)中覆盖 - 当按钮含图标（如
<svg>）时，骨架不应隐藏图标占位空间 —— 正确做法是让.btn__content包含图标和文字，并统一用visibility: hidden控制整体显隐，而不是只动文字
复杂点不在实现本身，而在确保骨架尺寸、动画节奏、语义属性三者始终对齐真实按钮的状态变化节奏 —— 少一个同步点，用户就会感知到“卡顿”或“不一致”。
