纯CSS实现加载动画效果

CSS3 的动画模块真是让人无限期待,能做的事儿太多了。

今天我们将使用纯 CSS3 实现一个简单的加载动画效果。

分析

先上最终效果,如下:

要想实现上面这个简单的动画效果,我们有两个问题需要解决:

  1. 如何让盒模型的元素显式为圆形
  2. 如何让元素动起来

下文分别对这两个问题进行解释

显示圆形

为了实现上面这个最基础的的 CSS3 加载动画效果,我们首先必需得让盒模型的元素显示为圆形。

在解决这个问题之前,我们先看一下 CSS 盒模型中 border 的本质:

从上面,我们应该可以看到元素盒模型中 border 的本质:元素每个方向上的 border 是梯形而并非矩形。

明白了这一点,我们再思考如何让元素显示为圆形。要么让边框称为弧形,要么让四个角为弧形,只要这个弧形的半径足够大就可以使元素看起来为圆形。所以,我们可以使用 border-radius 属性,为了让最终效果呈现为圆形,我们将 border-rasius 的属性值设置为元素几何中心到顶点的距离,即 border-radius: 50%

这样一来,我们就解决了第一个问题,接下来,就是如何动画的问题了。

让元素动起来

为了让元素动起来,我们需要使用 CSS3 中的动画模块。

这里,我就不再详述 CSS3 动画的原理了,只说一下实现上面最终效果图的原理。

  1. div 的背景色设为与页面相同颜色
  2. div 三个方向的 border 颜色设为另一种相同颜色,而剩余一个方向的 border 单独设为一种颜色
  3. 将整个圆形化的 div 绕中心旋转一周的变化设置为动画

本质上,整个元素都在运动,只不过由于颜色的原因,我们肉眼观看感觉到的是一段弧在圆环里转动。

以上,一个简单的 CSS 加载动画效果便完成了。


参考

  1. Single Element CSS Spinners
  2. How TO - CSS Loader