前端开发必备：CSS骨架屏加载动画技巧与实现指南

每种占位元素都应用keleton>基类，并通过子类控制形状：文本行、图片、头像等，以实现清晰的视觉指示。

3.2 编写可复用的 CSS 骨架样式

下面是一组简洁的骨架样式，包含渐变背景动画、圆角以及对不同内容块的布局适配。

/* 变量定义 */ 
:root {--skeleton-color: #e1e9f0;--skeleton-highlight: #f5f7fa;--skeleton-radius: 6px;--skeleton-duration: 1.4s;
}/* 基础骨架块 */ 
.skeleton {display: inline-block;height: 1em;min-height: 1em;width: 100%;background: linear-gradient(90deg,var(--skeleton-color) 25%,var(--skeleton-highlight) 37%,var(--skeleton-color) 63%);background-size: 400% 100%;border-radius: var(--skeleton-radius);animation: skeleton-loading var(--skeleton-duration) ease-in-out infinite;
}/* 具体形状：长文本、短文本、图片占位等 */ 
.skeleton-text { height: 1em; margin: 0.25em 0; }
.skeleton-text.short { width: 60%; }
.skeleton-image { height: 180px; width: 100%; border-radius: 8px; }
.skeleton-avatar { height: 40px; width: 40px; border-radius: 50%; }@keyframes skeleton-loading {0% { background-position: 100% 0; }100% { background-position: -100% 0; }
}

该示例演示了如何把变量、不同形状的占位块和动画整合到一个可重用的样式集里，便于在不同组件中快速应用。

3.3 数据加载完成后的状态切换

数据加载完成后，应将骨架占位替换为实际内容。这通常通过添加或移除类来实现，确保无缝过渡。

// 简单示例：加载完成后移除骨架并展示内容
function showContentAfterLoad(containerId) {const container = document.getElementById(containerId);// 假设内容已就绪const skeletons = container.querySelectorAll('.skeleton');skeletons.forEach(el => el.classList.add('hidden'));// 显示真实内容container.querySelectorAll('.content').forEach(el => el.style.display = 'block');
}
window.addEventListener('load', () => showContentAfterLoad('profile-card'));

通过上述脚本，骨架屏会在数据就绪后被移除，用户获取到更丰富的真实内容，从而提升最终的体验。