在現(xiàn)代
網(wǎng)頁設(shè)計趨勢中，骨架屏風是留住訪客不可或缺的一部分。他們通過讓用戶了解頁面內(nèi)容的狀態(tài)來創(chuàng)造速度的錯覺并管理用戶的期望。骨架屏幕提供的最重要但被低估的解決方案之一是它們有助于避免累積布局偏移 (CLS)，允許內(nèi)容在加載時一次性顯示，而不是按順序顯示。
設(shè)計網(wǎng)頁布局可以幫助您明確您的期望。您應(yīng)該設(shè)定目標、定義布局、添加任何所需的頁面，并使其可訪問并響應(yīng)不同的屏幕尺寸?，F(xiàn)在，考慮一個帶有封面圖片、個人資料圖片、一小段文字和號召性用語按鈕的簡單設(shè)計。
使用紙張或 Figma 或 Adobe XD 等應(yīng)用程序起草布局設(shè)計后，就該準備 HTML 結(jié)構(gòu)了。創(chuàng)建一個新文件index.html并為父<div> 中的布局編寫一些 HTML，其中class=”profile-container”。為每個元素添加class="skeleton"以應(yīng)用骨架屏幕加載效果。當使用 JavaScript 加載內(nèi)容時，您將刪除此類。注意：不要忘記在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>
在整個正文中應(yīng)用基本的 CSS 屬性，例如margin、font-family和color。
body {
margin: 0;
font-family: Arial;
color: rgba(255, 255, 255, 0.9);
}
要添加加載效果，請向骨架類添加一個::after 偽元素，該類從左 (-100%) 到右 (100%) 移動一兩秒鐘，從而產(chǎn)生微光動畫。
