实例教程 纯CSS3打造非常炫的加载动画效果

通过本实例教程，我们将使用纯 CSS3 技术来构建一些极其酷炫的网站加载动画效果。在本教程中，我们将学习如何使用 CSS3 的关键帧动画和过渡方法来创建许多有趣的动画。

1. 准备工作

在开始编写动画之前，需要先准备好一个 HTML 文件。你可以在文件中添加一些模拟加载过程的标签来测试你的动画。一些可以用于这个目的的标签是：div，span，img 等。

2. 确定动画的基本样式

在开始创建动画之前，需要先为动画指定基本的样式信息。动画的基本样式信息包括动画的宽度、高度、颜色、背景等。这些样式信息将为动画的后续创建提供基础。

.loading {
  width: 100px;
  height: 100px;
  background-color: #f4f4f4;
  border-radius: 50%;
  display: inline-block;
}

在上面的 CSS 代码中，我们创建了一个类名为“loading”的元素，该元素的值为圆形，背景为灰色，宽度和高度均为 100 像素。

3. 创建第一个动画效果

接下来，我们将为页面添加第一个动画效果。我们将创建一个旋转加载效果，以表示应用程序正在加载。下面是实现该效果的 CSS 代码：

.loading {
  animation: spin 2s linear infinite;
}

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

在上面的 CSS 代码中，我们使用了关键帧动画，用于循环旋转加载动画。我们创建了一个名为“spin”的关键帧，将动画从 0 到旋转 360 度，然后定义了动画本身，其中 “spin” 为关键帧名称，2 秒为持续时间，线性运动和无限循环。

现在，如果运行我们的代码，你将看到一个旋转的加载动画，表示应用程序正在加载中。

4. 创建第二个动画效果

接下来，我们将创建第二个动画效果——一个透明渐变加载动画。在这个动画中，我们将元素逐渐变为透明，同时使用 box-shadow 属性向元素添加透明度渐变效果。

.loading {
  box-shadow: inset 0 0 0 200px #8fc1e3, 0 0 8px rgba(0,0,0,.3);
  animation: opacity 2s linear infinite;
}

@keyframes opacity {
  0%, 40%, 100% {
    opacity: 1;
    box-shadow: inset 0 0 0 200px #8fc1e3, 0 0 8px rgba(0,0,0,.3);
  }
  50% {
    opacity: 0.3;
    box-shadow: inset 0 0 0 0 #8fc1e3, 0 0 8px rgba(0,0,0,.3);
  }
}

在上面的 CSS 代码中，我们使用了关键帧动画，其中我们用了三个关键帧，一个元素初始状态固定为不透明和两个中间状态，到最后回归不透明状态，随着过程中使用 box-shadow 属性使其透明的同时增加了阴影。

现在运行代码，你将看到一个脉冲的加载动画，表示应用程序正在加载中。

结论

在本实例教程中，我们使用了一些常见的纯 CSS3 动画技术，如关键帧动画和过渡技术。这些技术可以用于创建许多有趣的动画效果，只要我们了解基础和一些高级技术，我们就可以实现各种各样的想法。