选择骨架屏的布局样式
骨架屏加载效果展示
骨架屏是一个页面加载时的占位效果,在内容真正加载完成前显示灰色方块组成的页面轮廓。它给用户一种"页面正在加载"的视觉反馈,比传统loading动画更自然、用户体验更好。
传统loading通常使用旋转的加载图标,用户不知道要等多久。骨架屏会展示页面的实际布局结构,让用户提前感知内容的排布方式,减少感知等待时间。研究表明骨架屏能显著降低用户焦虑感。
将生成的HTML和CSS代码复制到您的项目中。在实际使用时,骨架屏应该在实际数据加载完成后被替换为真实内容。通常使用JavaScript控制骨架屏的显示/隐藏,或使用Vue/React的条件渲染。
Shimmer(流光)动画通过CSS渐变在元素上移动实现。使用linear-gradient创建从基础色到高亮色再到基础色的渐变,然后通过background-position移动产生流光效果。这是目前最流行的骨架屏动画方式。