网站制作趋势之骨架屏风
- By 本站 - 2023-04-04 19:18
- Read:206
在现代网站制作趋势中，骨架屏风是留住访客不可或缺的一部分。他们通过让用户了解页面内容的状态来创造速度的错觉并管理用户的期望。骨架屏幕提供的最重要但被低估的解决方案之一是它们有助于避免累积布局偏移 (CLS)，允许内容在加载时一次性显示，而不是按顺序显示。
设计网页布局可以帮助您明确您的期望。您应该设定目标、定义布局、添加任何所需的页面，并使其可访问并响应不同的屏幕尺寸。现在，考虑一个带有封面图片、个人资料图片、一小段文字和号召性用语按钮的简单设计。
使用纸张或 Figma 或 Adobe XD 等应用程序起草布局设计后，就该准备 HTML 结构了。创建一个新文件index.html并为父
中的布局编写一些 HTML，其中class=”profile-container”。为每个元素添加class="skeleton"以应用骨架屏幕加载效果。当使用 JavaScript 加载内容时，您将删除此类。注意：不要忘记在index.html文件的标题中链接 CSS 和 JavaScript文件。
Skeleton Screen Loading Effect
在整个正文中应用基本的 CSS 属性，例如margin、font-family和color。
body {
margin: 0;
font-family: Arial;
color: rgba(255, 255, 255, 0.9);
}
要添加加载效果，请向骨架类添加一个::after 伪元素，该类从左 (-100%) 到右 (100%) 移动一两秒钟，从而产生微光动画。
John Doe
Software Engineer @ Google || Full Stack Developer || Self Taught
Bengaluru, Karnataka, India • Contact info
转载请保留出处及原文地址:/index.php?r=article/Content/index&content_id=652