骨架屏掃光
一條高光從左掃到右,佔位骨架屏常用。
效果預覽
參數調節
完整代碼
/* 骨架屏掃光 */
@keyframes skeletonShine {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton-shine { background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 37%, #e2e8f0 63%); background-size: 200% 100%; animation: skeletonShine 1.4s ease-in-out infinite; }