HTML5动画与动效

HTML5动画与动效的基础（JS动画除外），如transition动画、animation动画、逐帧动画等，但是，光是了解基础代码，90%的初学者在最初的实践中具体使用时还是会感到懵逼和无所适从的。就像我们学数学，有时候遇到实践性较强的应用题，都不知道该怎么用学习的各种公式和定理去解题一样。

我想主要围绕HTML5动画与动效的实际应用来进行演示，通过实操让大家更加深入地了解相关的基础知识，帮助大家在实践中更好地落地运用。

基础HTML代码

Loading元素是页面中较为常见的一种元素，它能够非常有效地消除用户等待加载的焦虑感，一般而言此类元素都需要带有一些动态效果，表示页面正在“拼命”、“飞速”加载中。

现在，我们就要开始做一个最简单的Loading元素啦。

loading元素的HTML代码如下：

Loading...

我们的目标是要制作一个不停旋转的半圆圈，以作为页面的loading效果，如下图所示。

先画一个圈

首先，让我们先画出整个圆圈，思路很简单，我们用50%的border-radius形成圆形效果，代码如下：

在以上代码中，我们使用了box-shadow而非border属性来生成圆圈效果，这是由于box-shadow将不会影响div内部元素的定位，而带有一定宽度的border则有可能会引起内部元素位置的推移。圆圈效果如下图所示。

把一个圈变成半个圈

事实上，我们只需要以上的圆圈的一半区域，那如何能够裁去半边圆圈呢？在此我们要使用一种障眼法。为div创建一个before伪元素，代码如下：

在以上代码中，我们使伪元素的宽度为100像素，高度为200像素，并距离左侧100像素，为了使大家能清楚地辨析该形状区域，我们在此使用了红色（#FF7B33）作为背景色，如下图所示。

接下来，要使得这一形状从矩形变为半圆形，只需对其border-radius属性加以设置即可，代码如下：

在以上代码中，我们巧妙地运用了不同边的圆角弧度来生成了半圆形状，如下图所示。

接下来，只需要将半圆的背景色修改为和网页的背景色（在此为#4EA980）相同即可，代码如下：

通过以上的“障眼法”，我们就顺利地得到了一个半圆圈形状，如下图所示。

轨迹线的制作

我们还要创造一个更浅的透明白色圆圈，以作为半圆圈形状的轨迹背景，代码如下：

在以上代码中，我们仍然使用了box-shadow来绘制该轨迹背景，由于after伪元素默认的显示层级高于before伪元素，因此它不会被半圆形状所遮住，其显示效果如下图所示。

让圆圈转起来

请注意，接下来就是动画的制作时间！！

我们仍然先定义好关键帧动画，代码如下：

在load-effect动画中，我们使得元素从最初的0度旋转到360度。值得注意的是，在之前的animation中，我们使用了from和to作为关键帧动画的首尾两个节点，而在本动画中，我们使用了更加灵活的百分比作为节点，其中0%代表动画开始，100%代表动画结束。

接下来，我们将旋转半圆，通过绿色半圆对下方白色圆圈的遮罩，形成转圈效果。设置before伪元素的animation属性来生成动画，代码如下：

测试页面，现在我们看到的效果将出现一点小问题，before伪元素似乎并没有围绕圆圈的中心旋转，而是围绕半圆自己的中心转圈了，我们将半圆的背景色调回红色来看看这一问题，如下图所示。

要解决这一问题，则需要我们手动设置半圆的旋转中心，使其位于左侧垂直居中的位置，代码如下：

以上代码使用了transform-origin属性来完成了旋转中心的设置。测试页面，新的半圆旋转效果如图所示。

最后，将半圆的颜色改回背景色，我们将得到最终的loading动画效果，如图所示。

升级版：给loading元素加个尾巴

另一种常见的loading效果是带有渐变“尾巴”的转圈效果，我们将接下来制作这一效果。其中，渐变“尾巴”可以使用linear-gradient来绘制，代码如下：

在以上代码中，设置linear-gradient的方向为从左到右，从最左侧向右10%均为纯白色，再向右到50%的位置渐变为完全透明的白色，透明白色轨迹则使用box-shadow来制作，显示效果如图所示。

运用之前绘制半圆的经验，我们也可以使用before伪元素来绘制四分之一个圆，将其放在圆圈的左上角，这部分将作为圆圈的实体区域，代码如下：

测试页面，目前的加载效果如图所示。

然后，我们再添加after伪元素，绘制一个内部的圆圈，使其颜色与背景色相同即可，代码如下：

由于大圆圈的直径为200像素，轨迹宽度为20像素，因此中央的小圆圈的宽度为160像素，并距离顶部和底部20像素，这样正好能够将中央区域遮住，如图所示。

最后，我们使整个loader元素旋转即可，代码如下：

测试页面，现在我们就得到了流行的“拖尾”圆圈加载效果，如图所示。