骨架屏加载
骨架屏：内容加载前先显示灰色占位块（模拟标题、图片、文字行），配合从左到右的微光扫过动画（shimmer），告诉用户“内容马上到”，体验远好于空白或转圈。
实现：灰色块用 linear-gradient 背景平移做光泽扫过，background-size 放大 200% + animation 移动 background-position 即可。
- 占位块用 CSS gradient（深浅灰）而非图片，加载零成本
- shimmer 光泽：渐变背景放大 + 平移动画
- 圆角与内容保持一致，视觉更真实
HTML
<style> .sk { padding: 20px; max-width: 320px; margin: 30px auto; } .sk div { border-radius: 6px; margin-bottom: 12px; background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } .sk .av { width: 56px; height: 56px; border-radius: 50%; } .sk .t { height: 18px; width: 70%; } .sk .p { height: 12px; } @keyframes shimmer { to { background-position: -200% 0; } } </style> <div class="sk"> <div class="av"></div><div class="t"></div> <div class="p"></div><div class="p" style="width:90%"></div> <div class="p" style="width:55%"></div> </div>
本节要点骨架屏 = 灰色占位 + shimmer 光泽平移；比空白和转圈体验都好。
