在现代
网页设计趋势中，骨架屏风是留住访客不可或缺的一部分。他们通过让用户了解页面内容的状态来创造速度的错觉并管理用户的期望。骨架屏幕提供的最重要但被低估的解决方案之一是它们有助于避免累积布局偏移 (CLS)，允许内容在加载时一次性显示，而不是按顺序显示。
设计网页布局可以帮助您明确您的期望。您应该设定目标、定义布局、添加任何所需的页面，并使其可访问并响应不同的屏幕尺寸。现在，考虑一个带有封面图片、个人资料图片、一小段文字和号召性用语按钮的简单设计。
使用纸张或 Figma 或 Adobe XD 等应用程序起草布局设计后，就该准备 HTML 结构了。创建一个新文件index.html并为父<div> 中的布局编写一些 HTML，其中class=”profile-container”。为每个元素添加class="skeleton"以应用骨架屏幕加载效果。当使用 JavaScript 加载内容时，您将删除此类。注意：不要忘记在index.html文件的标题中链接 CSS 和 JavaScript文件。
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Skeleton Screen Loading Effect</title>
</head>
<body>
<div class="profile-container">
<div class="profile-images">
<div class="cover-img skeleton">
<img src="./image/linkedin banner.jpg">
</div>
<div class="profile-img skeleton">
<img src="./image/user-profile.jpg" alt="Photo by Ian Dooley on Unsplash">
</div>
</div>
<div class="profile-text">
<h1 class="skeleton">John Doe</h1>
<p class="skeleton">Software Engineer @ Google || Full Stack Developer || Self Taught</p>
<h5 class="skeleton">Bengaluru, Karnataka, India • <a class="skeleton" href="/">Contact info</a></h5>
<p class="skeleton"><a class="skeleton" href="/">534 connections</a></p>
</div>
<div class="profile-cta">
<a class="message-btn skeleton" href="/">Message</a>
<a class="more-btn skeleton" href="/">More</a>
</div>
</div>
<script src="script.js"></script>
</body>
在整个正文中应用基本的 CSS 属性，例如margin、font-family和color。
body {
margin: 0;
font-family: Arial;
color: rgba(255, 255, 255, 0.9);
}
要添加加载效果，请向骨架类添加一个::after 伪元素，该类从左 (-100%) 到右 (100%) 移动一两秒钟，从而产生微光动画。
