骨架屏要有和数据一致的占位结构,列表就占位几行卡片,不是随便堆几块灰。
用渐变做扫光动画,比匀速闪烁更接近「正在加载」的直觉。
数据到了就原位置替换骨架,骨架和内容的高度尽量对齐,避免切换时整页跳动。
.skeleton{
background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
background-size:400% 100%;
animation:shimmer 1.4s infinite;
}
@keyframes shimmer{
0%{background-position:100% 50%}
100%{background-position:0 50%}
}
THE END






暂无评论内容