在古代
网页设想趋向中，骨架屏风是留住访客不可或缺的一局部。他们经由过程让用户领会页面内容的状况来缔造速率的错觉并办理用户的希冀。骨架屏幕供给的最主要但被低估的处理计划之一是它们有助于防止积累规划偏移 (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%) 挪动一两秒钟，从而发生微光动画。
