优先用::before，因其默认渲染层级更可控、旧版Safari兼容性更好；必须设content: ""、position: absolute及100%宽高，父容器需为position: relative，配合linear-gradient(90deg)与background-position动画实现平滑扫光效果。
伪元素选 ::before 还是 ::after？优先用 ::before
骨架屏动画需要一层覆盖在卡片内容上的「光效层」，它不能干扰原有内容的交互和语义结构。::before 默认渲染在内容下方（z-index 为负），但通过 position: absolute + z-index 控制后更易管理层级；而 ::after 若未显式设置 content，会因默认为空字符串导致部分旧版 Safari 渲染异常。实际中统一用 ::before 更稳。
必须写 content: ""，否则伪元素不渲染；同时要设 position: absolute 和尺寸，否则无法定位到卡片区域。
- 卡片容器需设
position: relative，否则绝对定位的伪元素会相对于视口偏移 - 伪元素宽高建议用
100%而非inherit，后者在 Flex/Grid 容器中可能失效 - 避免用
top: 0; left: 0; right: 0; bottom: 0四边拉伸——在部分安卓 WebView 中会触发重绘抖动
微光动画用 linear-gradient + background-position 平移
不用 box-shadow 模拟光效，它无法做平滑位移；也不用多个渐变色块拼接，维护成本高。核心是单条高斯模糊感的亮带：用 linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) 创建水平亮条，再通过 background-position 动画横向移动。
关键细节：
立即学习“前端免费学习笔记（深入）”；
- 渐变角度固定用
90deg，确保光条始终水平——斜角在响应式缩放时易露马脚 -
background-size设为200% 100%，让亮条宽度占容器两倍，保证平移全程无断点 - 动画用
animation: shine 2s infinite，2s是经验阈值：短于1.5s显急促，长于2.5s显迟滞 - 别用
ease-in-out，匀速linear更符合「扫光」物理直觉
响应式适配靠 background-size 和 width 联动缩放
纯靠媒体查询切多套动画参数太重。真正轻量的做法是：让亮条宽度随卡片容器自适应缩放，而非固定像素值。
做法是把亮条宽度绑定到容器宽度上：
- 给卡片容器加
width: 100%并设最大宽度（如max-width: 360px），保证在小屏下不溢出 - 伪元素的
background-size改为200% 100%（百分比值相对容器宽高计算） - 动画中
background-position用百分比（如100% 0→-100% 0），这样缩放时位移距离同比例变化 - 禁用
transform: scale()做整体缩放——会导致background-position动画失步
示例关键片段：
card {
position: relative;
width: 100%;
max-width: 360px;
}
card::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
background-size: 200% 100%;
animation: shine 2s infinite linear;
}
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
移动端真机常见掉帧和闪烁问题怎么压
iOS Safari 和部分安卓 Chrome 在 background-position 动画中容易掉帧，尤其在 will-change: transform 缺失或伪元素未启用硬件加速时。
- 必须加
transform: translateZ(0)或will-change: background-position到伪元素上，触发 GPU 加速 - 禁用
backface-visibility: hidden——它在某些 Android 12+ 系统中反而引发闪烁 - 避免在伪元素上设
border-radius或box-shadow，这些会强制 CPU 渲染 - 若卡片有图片占位，确保图片
loading="lazy"且设height防止骨架屏闪跳
最易被忽略的一点：动画启动时机。不要等 DOM 加载完才加 class 触发动画，骨架屏应在首帧就存在——用内联样式或 SSR 直出伪元素，否则白屏时间明显可感知。
