css 加载动画_使用CSS动画增强网页加载的方式

css 加载动画

在上一个教程中，我们使用flexbox创建了一个全屏响应页面。 今天，我们将通过添加一些CSS动画来使此页面更具吸引力。

这是我们要构建的：

1. HTML

为了添加所需的动画，我们将略微更新初始页面标记。 在上一个教程中，我们main元素的标记如下所示：

<main class="page-main">
  <div>
    <h1>...</h1>
    <p>...</p>
    <p>...</p>
  </div>
</main>

出于本教程的目的，我们将添加一些额外的包装器，将其更改为：

<main class="page-main">
  <div>
    <div class="text-wrapper">
      <h1>...</h1>
    </div>
    <div class="text-wrapper p-wrapper">
      <p>...</p>
    </div>
    <div class="text-wrapper p-wrapper">
      <p>...</p>
    </div>
  </div>
</main>

以下是修改后的整体页面标记：

<div class="wrapper">
  <header class="page-header">
    <nav>
      <h2>...</h2>
      <ul>...</ul>
      <button class="cta-contact">...</button>
    </nav>
  </header>
  <main class="page-main">
    <div>
      <div class="text-wrapper">
        <h1>...</h1>
      </div>
      <div class="text-wrapper p-wrapper">
        <p>...</p>
      </div>
      <div class="text-wrapper p-wrapper">
        <p>...</p>
      </div>
    </div> 
  </main>
  <footer class="page-footer">
    <small>...</small>
    <ul>...</ul>
  </footer>
</div>

2.添加初始CSS样式

有了HTML，让我们将注意力集中在重要的东西上：CSS。

首先，我们将做四件事：

1. 隐藏所有页面元素。
2. 设置header和footer元素及其子元素的样式。
3. 为header的::after伪元素定义样式。
4. 在main为文本包装器及其子元素指定样式。

以下是相关的样式：

/* variables */
:root {
  --main-purple-color: #9e89b8;
}

.page-header nav > *,
.page-main,
.page-footer > * {
  opacity: 0;
}

.page-header,
.page-footer,
.page-main .text-wrapper {
  overflow: hidden;
}

.page-header nav > * {
  transform: translateY(-30px);
}

.page-footer > * {
  transform: translateY(30px);
}

.page-header {
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--main-purple-color);
  z-index: 99999;
  transform: scaleX(0);
}

.page-main .text-wrapper + .text-wrapper {
  margin-top: 10px;
}

.page-main .text-wrapper * {
  transform: translateY(120%);
}

.page-main .p-wrapper * {
  transform: translateY(-120%);
}

3.触发CSS动画

在准备好HTML和基本CSS之后，我们现在就可以集中精力处理页面动画了。

但是，在执行此操作之前，请确保我们了解它们的运行时间：理想情况下，页面完全加载后立即运行。 这样可以确保所有页面资产都准备就绪，位于正确的位置，并且我们不会丢失任何动画效果。

考虑到这一点，我们首先等待页面加载，然后在发生这种情况时，我们使用JavaScript将loaded类添加到body 。

以下是相关JavaScript代码：

window.addEventListener("load", () => {
 document.querySelector("body").classList.add("loaded"); 
});

我们应用的所有动画都将对已loaded类的后代进行。

因此，我们的第一个放大动画针对header的::after伪元素：

.loaded .page-header::after {
  animation: scaleIn 1.3s ease-in 0.2s forwards;
}

@keyframes scaleIn {
  100% {
    transform: scaleX(1);
  }
}

提示：默认情况下，元素的变换原点是其中心，这就是为什么伪元素的动画从其中心开始的原因。 如果希望动画从另一个位置开始，只需更改目标元素的transform-origin属性值。

在下面，您可以看到在应用不同的transform-origin动画如何变化：

接下来，我们使用淡入效果来显示页面元素。 除了此动画之外，我们还使用幻灯片动画来显示header和footer内容：

.loaded .page-main {
  animation: fadeIn 1s ease-in 0.7s forwards;
}

.loaded .page-header nav > *,
.loaded .page-footer > * {
  animation: fadeIn 1s ease-in 0.7s forwards, slideIn 0.8s ease-in 0.9s forwards;
}

@keyframes fadeIn {
  60% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

@keyframes slideIn {
  100% {
    transform: translateY(0);
  }
}

最后，通过滑入效果可以看到main的元素：

.loaded .page-main .text-wrapper * {
  animation: slideIn 0.6s cubic-bezier(0.54, 0.46, 0.54, 0.94) 2s forwards;
}

@keyframes slideIn {
  100% {
    transform: translateY(0);
  }
}

现在，让我们再次看一下我们刚刚构建的内容：

结论

在本快速教程中，我们通过利用CSS动画设法为HTML flexbox页面设置了动画。

关闭前的一些注意事项：

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-enhance-a-page-with-css-animations--cms-32100

css 加载动画