用::before实现骨架屏因能独立控制尺寸、位置、动画且不干扰盒模型；需设content、absolute定位、显式宽高，多伪元素分层绘制头像/标题/段落，配合适当background-size与linear动画及移动端适配措施。
为什么用::before不用background-color
纯background-color只能铺一层死灰，没法模拟文字行高、头像圆角、段落间距这些细节，加载后内容一进来就跳动。而::before是独立图层，能精准控制尺寸、位置和动画，且不干扰真实内容的盒模型。
常见错误是给骨架容器直接设background: #f0f0f0，结果图片加载后高度突变、文字行错位；或者用border代替边框，它不占空间，导致骨架比真实内容窄一圈。
-
::before必须设content: ""，否则不渲染 - 要加
position: absolute，并配合父容器position: relative - 宽高必须显式设置（比如
width: 100%; height: 1.5em;），不能靠内容撑开 - 避免用
top: 0; left: 0; right: 0; bottom: 0全覆盖——会压住子元素的z-index，导致后续图片或文字无法显示
怎么用::before画出头像+标题+段落结构
不是靠多个div堆，而是用一个容器 + 多个::before伪元素分层绘制：头像用radial-gradient，标题和段落用横向linear-gradient，再通过background-position微调位置。
关键点在于每个伪元素只负责一块区域，而不是整个背景一锅炖。比如头像区域单独一个::before，标题另起一个，段落再用第三个——这样动画可以错开，结构也清晰。
- 头像：
background: radial-gradient(circle, #f0f0f0 0%, #f0f0f0 50%, transparent 50%)+background-size: 40px 40px - 标题：
background: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%)+background-size: 200px 16px - 段落：
background: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%)+background-size: 100% 12px+background-repeat: repeat-y - 所有伪元素都要加
border-radius，和真实组件保持一致，否则加载后边缘“弹出来”
background-position动画为什么不动或闪一下
动画失效最常见原因是没配齐三要素：可平移的背景图 + 足够大的background-size + 正确的@keyframes写法。单写background-position: 0 0 → 100% 0没用，因为背景图本身没纹理、没宽度，位移等于白动。
典型翻车场景：用background: #f0f0f0配动画，或者background-size: 100% 100%——光条一滑就跑出容器，只剩灰色底色，看起来像卡顿。
- 必须用
linear-gradient(90deg, ...)或radial-gradient生成有明暗过渡的背景图 -
background-size至少设为200% 100%（横向拉宽），让background-position有足够空间移动 - @keyframes里
from { background-position: -200% 0; }，to { background-position: 200% 0; }，单位不能省 - 动画函数必须用
linear，别用ease——后者在起点终点减速，造成“停顿感”，不像扫描
移动端适配时::before错位或圆角变方怎么办
问题出在background-size单位和border-radius计算逻辑上。iOS Safari不支持rem单位的background-size，而vw在缩放后又会让圆角比例失真。
更隐蔽的问题是：伪元素没设overflow: hidden，导致扫描光效滑出圆角区域，边缘露白；或者父容器没设aspect-ratio，图片占位块被压缩变形。
- 头像类伪元素必须加
overflow: hidden，否则radial-gradient溢出圆角 - 图片占位容器用
aspect-ratio: 4/3，别用固定height -
background-size统一用px或vw，但vw要配max-width: 100%防超宽 - 避免在
:root里定义全局骨架动画，只作用于具体类名如.skeleton-avatar::before
z-index层级和真实内容是否对齐。很多人做完动画觉得没问题，上线后发现加载完成瞬间“闪一下”——其实是骨架伪元素盖住了刚插入的img或text，而没及时移除或隐藏。这需要严格控制显隐时机，不能只靠opacity渐变，得配合visibility和pointer-events: none。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
