加载屏幕 HTML - CSS

在移动应用和网站上，加载屏幕是让用户知道应用正在加载所需内容的常见方式。在这篇文章中，我们将介绍如何创建一个带有 CSS 动画的加载屏幕。

HTML

首先，我们将创建 HTML 代码。在这个例子中，我们将使用一个简单的 div 标签来创建一个加载屏幕，它将占满整个窗口。

<div class="loader-wrapper">
  <div class="loader"></div>
</div>

我们使用了一个包含两个 div 的标记。外面的 div 用来包裹整个加载屏幕，里面的 div 则用来显示加载动画。

CSS

现在我们来添加样式。我们来创建 loader-wrapper 的样式。

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

在此样式中，我们设置了 loader-wrapper 的位置为固定，它的上、左、右和底部全部为 0。我们还将它的背景颜色设置为白色，并将其显示设置为 flex，并使用 justify-content: center 和 align-items: center 将其居中。

现在，我们需要添加在屏幕中心旋转的加载动画。我们将loader-wrapper的字体大小设置为0，使loader居于wrapper中心。

.loader {
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: auto;
  font-size: 0;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

我们使用 CSS 样式来添加动画。我们设置了边框粗细为 8px，边框颜色为 #3498db，圆角半径为 50%。我们还设置了宽和高为 50px，并将 margin 设置为 auto，以使其水平和垂直居中。

我们在加载器上使用了一个名为 spin 的动画，其中我们定义了从 0 度到 360 度的旋转。通过设置 infinite，我们让动画永久循环。

结论

现在，我们已经创建了一个带有 CSS 动画的加载屏幕。使用这个加载屏幕，我们可以让用户知道应用正在缓慢加载，并为他们提供一个更好的用户体验。

完整的 CSS 样式以 Markdown Code Snippet 的方式呈现。

``` ` .loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; display: flex; justify-content: center; align-items: center; }

.loader { border-top: 8px solid #3498db; border-radius: 50%; width: 50px; height: 50px; margin: auto; font-size: 0; animation: spin 1s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` `

最终效果图如下所示：