网页设计趋势之骨架屏风
在现代网页设计趋势中，骨架屏风是留住访客不可或缺的一部分。他们通过让用户了解页面内容的状态来创造速度的错觉并管理用户的期望。骨架屏幕提供的最重要但被低估的解决方案之一是它们有助于避免累积布局偏移 (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 https-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%) 移动一两秒钟，从而产生微光动画。
相关资讯
阿里云、腾讯云、华为云严选优质服务商
