只要CSS就能实现的骨架屏方案在线体验地址https://jsfiddle.net/z13wtr0q/先说优缺点吧。毕竟骨架屏的实现方案有很多优点。简单，不需要工程化，不需要puppeteer生成skeletondom，不需要二次开发和维护定制。高，可以为所欲为，不臃肿，只给你想要的缺点自动化程度低，需要手动给骨架dom添加类协作要求高，不像工程，可以用工程来约束思想并通过伪元素实现骨架样式，通过操作样式实现骨架与页面的动态切换实现css部分（scss写法）通过after伪元素生成骨架样式，覆盖到实际通过绝对元素。skt-loading{指针事件：无；/*加载事件期间阻塞*/.skeleton{position:relative;溢出：隐藏；边框：无！重要；边界半径：5px；背景色：透明！重要；背景图像：无！重要；&::after{内容：'';位置：绝对；左：0；顶部：0；z-指数：9；宽度：100%；高度：100%；背景色：#EBF1F8；显示：块；定义，见需求修改*/&:not(.not-round)::after{border-radius:4px;}&:not(.not-before)::before{position:absolute;顶部：0；宽度：30%；高度：100%；内容：””;背景：线性渐变（向右，rgba(255,255,255,0)0,rgba(255,255,255,.3)50%,rgba(255,255,255,0)100%）；变换：skewX（-45deg）；z-指数：99；动画：skeleton-ani1s轻松无限；显示：块；}&.badge{&::after{背景颜色：#F8FAFC;}}}}@keyframesskeleton-ani{/*骨架屏幕动画*/from{left:-100%;}至{左：150%；}}html部分只需要将骨架类添加到你认为合理的骨架粒度元素即可。js部分控制skt-loading类的切换注意after伪元素不能插入inputimg等非容器元素，所以如果需要添加skleton需要再添加一层元素包裹起来.对于vuereact这种数据驱动的页面，需要先有mock数据来生成dom。欢迎抛砖引玉
