骨架屏（Skeleton Screen）是一种优化用户体验的技术，可以在页面加载时提供一个占位符，使用户感觉页面正在加载中，从而减少等待时间的焦虑感。使用 CSS 制作骨架屏效果通常需要以下步骤：
首先确定骨架屏的布局和内容，可以使用画图工具或在线工具生成骨架屏的页面结构。
根据骨架屏的页面结构，使用 CSS 给每个占位符元素设置相应的样式，包括背景色、边框、动画等。一般使用伪元素或伪类来实现样式的设置，例如使用 ::before 或 ::after 给元素添加占位符。
针对不同的页面元素，可以使用不同的样式设置，例如对于图片元素，可以使用背景图片或 SVG 来代替实际的图片，从而实现占位符的效果。
使用 JavaScript 控制骨架屏的显示和隐藏，可以在页面加载完成后立即隐藏骨架屏，显示实际的内容。可以使用 window.onload 或 DOMContentLoaded 事件来实现页面加载完成的检测。
关键词：骨架屏、Skeleton Screen、占位符、伪元素、伪类、背景图片、SVG、JavaScript、window.onload、DOMContentLoaded。