骨架屏扫光
一条高光从左扫到右,占位骨架屏常用。
效果预览
参数调节
完整代码
/* 骨架屏扫光 */
@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; }