直接用::before做骨架屏微光会失效，因为其默认为inline元素，不占空间、无法设置宽高和背景渐变，也不响应animation；必须声明content: ""、display: block/inline-block及定位尺寸才能生效。
为什么直接用 ::before 做骨架屏微光会失效？
因为 ::before 默认是 inline 元素，不占空间、无法设置宽高和背景渐变，更不会响应 animation 的位移或透明度变化。常见表现是：光效不动、一闪即逝、或者根本看不到。
必须显式声明 content: "" + display: block（或 inline-block）+ 定位/尺寸控制，否则伪元素只是“存在”，但不可见、不可动。
实操建议：
-
content必须是非空字符串，""是最低要求，不能省略 - 优先用
position: absolute配合父容器position: relative，避免影响文档流 - 微光本质是线性渐变移动，所以
background-image得用linear-gradient，不能只靠opacity动画
如何写一个可复用的骨架屏微光 ::before 样式？
核心是把「光条」抽象成覆盖在内容区域上的半透明渐变层，并让它从左到右平移。下面这段可以直接复制进项目：
立即学习“前端免费学习笔记（深入）”；
.skeleton {
position: relative;
background-color: #f5f5f5;
}
.skeleton::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
background-size: 200% 100%;
animation: shine 1.5s infinite;
}
@keyframes shine {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
注意点：
-
background-size: 200% 100%是关键——让渐变区域比容器宽一倍，才能平移出「扫光」感 -
animation移动的是background-position的横轴，不是transform，否则在低性能设备上易卡顿 - 如果骨架元素高度不固定（如文字行高动态），建议用
min-height或aspect-ratio锁定占位，否则::before会塌陷
在不同场景下怎么适配 ::before 微光？
实际项目中骨架结构千差万别，光效得跟着容器形状走：
- 头像圆角区域：给
.skeleton加border-radius: 50%，同时::before无需额外裁剪，父级overflow: hidden自动处理 - 多行文本模拟：用多个
span.skeleton并列，每个设不同width和margin，避免用单个伪元素强行撑出多行 - 按钮类小尺寸组件：把
background-size调小到120% 100%，动画时长缩到1s，否则光效太慢显得卡 - SSR 或服务端渲染环境：确保 class 名没被 CSS-in-JS 工具误删，推荐用
data-skeleton属性代替 class 触发样式，更可控
哪些兼容性和性能问题容易被忽略？
微光动画看着简单，但在 iOS Safari 和旧版 Android WebView 上容易翻车：
- iOS 15.4 以下对
background-position动画支持不稳定，偶尔会跳帧，加will-change: background-position可缓解（但慎用，可能引发重绘开销） - 部分安卓低端机开启硬件加速后，
linear-gradient渐变边缘会出现色带（banding），可改用rgba(255,255,255,0.35)→rgba(255,255,255,0.45)小幅拉开色阶 - 如果页面骨架节点过多（比如列表 > 50 项），每个都跑
animation会明显拖慢 FPS，建议用 IntersectionObserver 控制「进入视口才启用动画」 - 不要在
::before里叠加box-shadow或多层filter，这会让合成层激增，尤其在滚动中极易掉帧
真正难的不是写出第一版微光，而是让所有机型上它都「刚好够快、刚好够像光、刚好不抢眼」——细节全藏在 background-size、animation-duration 和父容器的 overflow 交互里。
