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元素旋转即可,代码如下:

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191011A0897U00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券