使用CSS自定义属性构建骨架屏
写在前面 几天前看到薄荷前端团队分享的《 前端骨架屏方案小结 》，突然回想起一年前看到的max bock写的《 Building Skeleton Screens with CSS Custom Properties 》，翻译整理写下出此文，分享一下使用CSS自定义属性构建骨架屏的技巧，先看骨架屏demo效果吧 设计Web上的加载状态常常被忽略或被认为是事后考虑。性能不仅是前端开发人员的职责，构建与慢速连接一起工作的体验也是设计挑战。 虽然前端开发人员需要注意一些事情，比如压缩和缓存，但是设计人员必须考虑UI处于“加载”或“离线”状态时的外观和行为。 速度幻觉 随着我们对移动体验的期望发生变化，我们对性能的理解也在变化。我们期望网络应用程序感觉像本机应用程序一样快速响应，无论其当前的网络覆盖范围如何。 感知性能 是衡量用户感觉速度的尺度。这个想法是用户更有耐心，并且如果他们知道正在发生什么，并且在内容实际存在之前能够预测内容，那么他们会认为系统更快。这在很大程度上与管理期望和保持用户知情有关。 对于Web应用程序，这个概念可能包括显示文本，图像或其他内容元素的“模型” - 称为 骨架屏 💀。可以在网上可以看到，Facebook，Google，Slack等公司使用： （Facebook的骨架屏） （Slack的骨架屏） 例子 假设你正在构建一个Web应用程序