使用 HTML 和 CSS 创建扫描动画加载器

在现代 web 应用程序中，加载器是必不可少的组件之一。 它们用于有趣和富有表现力的方式告诉用户应用程序正在加载和处理信息。 在本文中，我们将学习如何使用 HTML 和 CSS 创建动画扫描加载器。

HTML 结构

我们的加载器需要容器 div 和标题文字，将它们包裹在外部 div 中。 可以使用以下 HTML 代码添加此结构。

<div class="loader-container">
  <div class="loader"></div>
  <h2>Loading...</h2>
</div>

CSS 样式

现在，我们将为我们的加载器创建必要的 CSS 样式。

首先，我们需要将加载器的容器 div 居中。 我们可以使用 display: flex 属性，将其子元素沿着主轴和交叉轴居中。

.loader-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

接下来，我们将为 loader div 应用样式。 我们将这个 div 变成一个灰色的圆，然后使它像开关一样缩小和放大，以模拟扫描效果。

我们可以使用 border-radius 属性将 div 转换为圆形：

.loader {
  width: 80px;
  height: 80px;
  border: 10px solid gray;
  border-radius: 50%;
  animation: scan 1s infinite linear;
}

还需要为动画创建一个键控帧。

@keyframes scan {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: scale(1);
  }
}

最后，我们为标题应用样式。 改变它的字体颜色，字体大小，字体重量和字体。

h2 {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
  color: gray;
  font-family: sans-serif;
}

完整 CSS 代码

.loader-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 80px;
  height: 80px;
  border: 10px solid gray;
  border-radius: 50%;
  animation: scan 1s infinite linear;
}

@keyframes scan {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: scale(1);
  }
}

h2 {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
  color: gray;
  font-family: sans-serif;
}

结论

了解如何创建动画扫描加载器是 web 开发中的一项重要技能。 当您要创建 web 应用程序并想要提供令人愉悦的用户体验时，此技能非常有用。 通过编写 HTML 和 CSS，您可以轻松创建自己的加载器。