什么是骨架屏?
骨架屏是一种在页面加载过程中,以占位符形式展示页面结构的技术。它通过显示简单的灰色块和线条,让用户在等待内容加载时获得视觉反馈,提高了用户的满意度。
在移动设备和慢速网络环境下,页面加载速度变得尤为关键。用户不愿等待长时间才能看到页面内容。骨架屏能够在内容加载完全之前快速展示页面结构,让用户感受到页面加载的进度,从而提高了用户体验。
CSS 实现骨架屏
1、实现简单的html骨架页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeleton Example</title>
</head>
<body>
<div class="skeleton">
<div class="skeleton-header"></div>
<div class="skeleton-body">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
</div>
</body>
</html>
2.css样式
/* skeleton.css */
.skeleton {
width: 300px;
padding: 20px;
background-color: #f6f7f8;
}
.skeleton-header {
width: 100%;
height: 200px;
background-color: #e0e0e0;
}
.skeleton-body .skeleton-line {
width: 100%;
height: 20px;
margin-top: 20px;
background-color: #e0e0e0;
}