跳到主要内容

骨架屏扫光

一条高光从左扫到右,占位骨架屏常用。

效果预览
参数调节
完整代码
/* 骨架屏扫光 */
@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; }