使

使用 HTML 和 CSS 的骨架屏幕加载动画

2025-05-27

使用 HTML 和 CSS 的骨架屏幕加载动画

在本文中，我展示了如何使用 HTML、CSS 和 JavaScript 创建骨架屏幕加载动画。这个动画是我在个人资料卡片上创建的。

你会发现很多网站在加载任何元素之前都会显示骨架加载动画。毫无疑问，它大大提升了网站的质量和美观度。你需要对 HTML 和 CSS 有基本的了解才能制作它。

✅观看实时预览👉👉骨架屏幕加载动画

我之前演示过这种效果，但效果不太好。这次我使用了 JavaScript 来实现。

打开网页时，此骨架屏幕加载动画将持续三秒。三秒后，此效果关闭，个人资料卡片上的所有信息均可显示。

步骤 1：设计网页

为了制作这个动画，我首先用 CSS 代码设计了网页。这里我使用了浅蓝色作为网页的背景颜色。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #eff7f2;
  font-family: "Lato", sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

设计网页

第二步：骨架加载的基本结构

现在我已经创建了骨骼加载动画或个人资料卡的基本结构。我使用了个人资料卡的“width: 300px和” height: 400px。卡片周围添加了阴影以增强美感。

<div class="user-card skeleton">

</div>
Enter fullscreen mode Exit fullscreen mode 
.user-card {
  width: 300px;
  height: 400px;
  box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  overflow: hidden;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow 0.2s ease-in;
  cursor: pointer;
}

.user-card:hover {
  box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.4);
}
Enter fullscreen mode Exit fullscreen mode

骨架加载的基本结构

步骤 3：添加个人资料图片和封面图片

现在我在个人资料卡中添加了个人资料图片和封面图片。我将个人资料图片的宽度和高度设置为 100 像素。我之前border-radius: 50%把它弄得完全圆润。我添加了一个封面图片，宽度height: 150px和高度均为 100%。

<div class="user-cover">
   <img class="user-avatar" src="img.jpg" alt="user profile image" />
</div>
Enter fullscreen mode Exit fullscreen mode 
.user-card .user-cover {
  height: 150px;
  width: 100%;
  position: relative;
  background-image: url(img1.jpg);
  background-position: center;
  background-size: cover;
}

.user-card .user-cover .user-avatar {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -35px;
  border: 2px solid #fff;
}
Enter fullscreen mode Exit fullscreen mode

添加个人资料图片和封面图片

步骤 4：向卡片添加基本信息

现在，我已经在这个骨架屏幕加载动画或个人资料卡中添加了一些基本信息。我使用了 margin-top: 35px 来保持所有信息从上到下排列。

<div class="user-details">
   <div class="user-name hide-text">Anamika Roy</div>
   <div class="user-email hide-text">Web Designer</div>
   <div class="user-text hide-text">Lorem ipsum ... consectetur. </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.user-card .user-details {
  text-align: center;
  margin-top: 35px;
  margin-bottom: 25px;
  width: 80%;
}

.user-card .user-details .user-name {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
}

.user-card .user-details .user-email {
  font-size: 14px;
  color: #0f5fc0;
  font-weight: 500;
}
.user-card .user-details .user-text{
  margin-top: 5px;
  font-size: 15px;
  color: #666;
}
Enter fullscreen mode Exit fullscreen mode

向卡片添加基本信息

步骤 5：创建联系按钮

现在我在其中添加了一个联系按钮。我使用了按钮名称height: 35px，width 60%背景颜色为蓝色。我使用了 font-weight: bold 来增加文本的大小。

<button class="contact-user hide-text">CONTACT</button>
Enter fullscreen mode Exit fullscreen mode 
.user-card .contact-user {
  margin-bottom: 15px;
  height: 35px;
  width: 80%;
  border: 0;
  color: white;
  font-weight: bold;
  background: #035f7d;
  letter-spacing: 0.5px;
  border-radius: 5px;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

创建联系人按钮

步骤5：为图像添加加载效果

首先，我在头像和封面图之间添加了动画。但是，图片本身没有动画，只有背景使用了灰色。我设计头像和封面图的方式与此处的设计方式相同。

.user-card.skeleton .user-cover {
  background: #e2e2e2;
}

.user-card.skeleton .user-cover .user-avatar {
  display: none;
}

.user-card.skeleton .user-cover::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -35px;
  border: 2px solid #fff;
  z-index: 10;
  background: #e2e2e2;
}
Enter fullscreen mode Exit fullscreen mode

为图像添加加载效果

步骤6：为信息添加加载效果

现在我在文本和按钮之间添加了动画和颜色。我首先为按钮和文本添加了颜色，然后使用 添加了动画@keyframes。

✅相关文章👉👉透明登录表单

animation-duration: 2s用于使此动画每两秒运行一次。这里的动画表示黑色阴影将每两秒从左向右移动一次。

.user-card.skeleton .hide-text {
  background: #e2e2e2;
  color: transparent;
  position: relative;
  overflow: hidden;
}

.user-card.skeleton .hide-text::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  height: 100%;
  width: 50px;
  background: linear-gradient(to right, #e2e2e2 25%, #d5d5d5 50%, #e2e2e2 100%);
  animation-name: gradient-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  filter: blur(5px);
}
Enter fullscreen mode Exit fullscreen mode

现在我已经使用@keyframes实现了这个动画。

@keyframes gradient-animation {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}
Enter fullscreen mode Exit fullscreen mode

为信息添加加载效果

步骤 7：使用 JavaScript 关闭骨架加载效果

现在最重要的是使用 JavaScript 关闭动画。上面我们已经使用 CSS 添加了骨架屏幕加载动画。

此动画将无限期地持续下去。因此，现在，一段时间后，您必须使用 JavaScript 关闭该动画，并指示查看个人资料卡片中的所有信息。我使用 将时间设置为 3000 毫秒setTimeout。这意味着之后3000 milliseconds灰色动画将被隐藏。

如果您想使用 4 秒而不是这 3 秒，那么您必须使用 4000 而不是这里的 3000。

const $el = document.querySelector(".user-card");

// Loading finished
setTimeout(() => {
  $el.classList.remove("skeleton");
  $el
    .querySelectorAll(".hide-text")
    .forEach((el) => el.classList.remove("hide-text"));
}, 3000);
Enter fullscreen mode Exit fullscreen mode

使用 HTML CSS 的骨架屏幕加载动画

相关文章：

  1. 响应式页脚 HTML CSS
  2. 海得拉巴的寄宿学校
  3. 使用 JavaScript 的简单秒表
  4. JavaScript 密码生成器
  5. 海得拉巴的IB学校
  6. 使用 HTML CSS 的侧边栏菜单

希望您通过本教程学会了如何使用 HTML、CSS 和 JavaScript 创建骨架加载动画。我已经分享过很多类似的教程，您可以参考一下。

您可以访问我的博客获取更多类似的教程。https
://www.foolishdeveloper.com/

文章来源：https://dev.to/shantanu_jana/sculpture-screen-loading-animation-using-html-css-1ec3
Devto 翻译
PREV
让我的求职申请脱颖而出的一件事
NEXT
使用 HTML 和 CSS 的圆形进度条