骨架屏纯CSS实现的核心限制是无法动态获取DOM尺寸，须手动预设宽高、圆角等；呼吸感动画靠background-size与position配合渐变；响应式需同步调整aspect-ratio、padding等；IE11兼容需用伪元素遮罩替代clip-path。
骨架屏用纯CSS实现的核心限制
骨架屏本质是占位符，不是动画效果。不依赖JS框架时，animation 和 @keyframes 是唯一可控手段，但必须绕开「内容尺寸动态计算」这个死结——CSS无法读取真实DOM宽高，所以所有骨架元素的 width、height、border-radius 都得手动预设或用固定比例模拟。
常见错误现象：background: linear-gradient(...) 覆盖后文字仍可选中、点击区域错位、响应式断点下骨架变形。
实操建议：
- 用
aspect-ratio替代硬写height（兼容性需查 Can I Use，Safari 15.4+ 支持） - 文字行用多个
inline-blockdiv模拟，每行高度统一设为1em，避免字体缩放破坏节奏 - 图片区域优先用
background-color+border-radius，别用img标签占位——它会触发加载、影响首屏LCP
如何用 linear-gradient 做出「呼吸感」骨架动画
所谓呼吸感，其实是背景色从浅灰到更浅灰的平滑过渡，不是位移或缩放。关键在 background-size 和 background-position 的配合，否则动画会卡顿或闪烁。
立即学习“前端免费学习笔记（深入）”；
使用场景：列表项、卡片、头像+标题+摘要的标准三段式结构。
实操建议：
- 动画只作用于
background-image，不要加transform或opacity——这两者触发布局重排，尤其在低端安卓机上掉帧明显 -
background-size设为200% 200%，background-position从0% 0%动到100% 100%，才能保证渐变方向稳定 - 示例关键代码：
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);<br>background-size: 200% 200%;<br>animation: loading 2s ease-in-out infinite;
响应式骨架屏里最易被忽略的断点陷阱
很多人在媒体查询里只改 width，结果小屏下骨架块堆叠错乱、圆角突然变方、文字行高塌陷——根本原因是没同步调整 aspect-ratio、padding 和 background-size。
性能影响：每个断点重复定义一套 @keyframes 会增大CSS体积，且浏览器需重新解析动画规则。
实操建议：
- 把动画抽成独立
@keyframes loading，只在不同断点里调animation-duration和background-size - 头像类圆角元素，
border-radius必须用rem或%，禁用px——否则小屏下圆角会消失 - 卡片内多段骨架（标题/描述/操作栏）用
flex布局时，给容器加min-height: 0，防 Safari 下 flex 子项高度塌缩
IE11 兼容方案：不用 clip-path 也能做不规则骨架
clip-path 在 IE11 完全不可用，而很多设计稿要求椭圆头像、斜角卡片、带阴影的骨架块。这时候得回归「遮罩层+定位」老办法。
容易踩的坑：overflow: hidden 在 IE11 对 transform 元素失效，导致遮罩漏出；filter: blur() 在 IE11 渲染异常，直接禁用。
实操建议：
- 用伪元素
::before绘制遮罩层，position: absolute覆盖在骨架块上，再用z-index控制层级 - 椭圆头像：父容器设
border-radius: 50%，子元素用margin: auto居中，不依赖clip-path - 斜角卡片：用
linear-gradient绘制三角形背景，叠加在骨架块右下角，比skew()更稳
padding 或 line-height，所有对应骨架的尺寸和动画节奏都得跟着调——没有JS自动测量，就得靠人盯住每一处细节。 
