跳到主要內容

骨架屏掃光

一條高光從左掃到右,佔位骨架屏常用。

效果預覽
參數調節
完整代碼
/* 骨架屏掃光 */
@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; }