CSS实现一个简单loading动画效果

让我来详细讲解一下“CSS实现一个简单loading动画效果”的完整攻略。

让我来详细讲解一下“CSS实现一个简单loading动画效果”的完整攻略。

1. 利用CSS动画实现loading效果

CSS动画提供了一种简单又流畅的方式来实现loading效果，我们可以利用CSS3的@keyframes关键字结合transform属性和animation属性来创建一个简单的loading效果。

1.1 创建loading图形

首先，我们需要创建出我们要实现的loading图形。这里我以一个圆形旋转的图形为例，代码如下：

<div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>

.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.dot1,
.dot2 {
  width: 0px;
  height: 0px;
  position: absolute;
  top: 0;
  left: 19px;
  border: 2px solid #333;
  border-radius: 50%;
  animation: spinner 2s linear infinite;
}

.dot2 {
  animation-delay: -1s;
  left: -19px;
}

@keyframes spinner {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

我们将.spinner设置为居中，宽高为40px，然后创建两个小圆点.dot1和.dot2，利用border属性画出它们的形状，设置左右两边的位置并利用animation属性启动动画效果。

1.2 创建动画

接下来，我们需要创建旋转动画效果。这里我们使用@keyframes关键字创建一个名为spinner的动画，关键帧包括三个，分别为0%、50%、100%。代码如下：

@keyframes spinner {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

这个动画会从0%开始，将圆点的大小逐渐缩小到0，然后在50%时达到最大尺寸，再在100%时回到初始状态。

1.3 完成CSS代码

最后，把创建好的loading图形和动画效果结合起来。我们把.dot1和.dot2的animation属性设置为spinner，时间为2s，线性变化，并设置其无限循环。代码如下：

.dot1,
.dot2 {
  width: 0px;
  height: 0px;
  position: absolute;
  top: 0;
  left: 19px;
  border: 2px solid #333;
  border-radius: 50%;
  animation: spinner 2s linear infinite;
}

.dot2 {
  animation-delay: -1s;
  left: -19px;
}

这样，我们就完成了一个简单的CSS loading动画效果。

2. 其他实现loading效果的方式

除了CSS动画之外，还有一些其他的方式可以实现loading效果。以下是两种基于JavaScript的实现示例：

2.1 利用setInterval和canvas绘制

这种方式需要利用canvas HTML元素，用JavaScript在canvas上绘制loading图形，并且用setInterval函数来不断刷新图形。代码如下：

<canvas id="loading"></canvas>

var canvas = document.getElementById('loading'),
    context = canvas.getContext('2d'),
    pointCount = 12,
    width = 200,
    height = 200,
    i = 0,
    angle = 0;

function draw() {
  context.clearRect(0, 0, width, height);
  angle += Math.PI / 6;
  for (i = 0; i < pointCount; ++i) {
    context.beginPath();
    var x = 100 + Math.cos(angle + i * Math.PI / 6) * 50;
    var y = 100 + Math.sin(angle + i * Math.PI / 6) * 50;
    context.arc(x, y, 5, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = '#333';
    context.fill();
  }
}

setInterval(draw, 100);

2.2 利用jQuery插件

如果你想用一种更加简便的方式，也可以使用基于jQuery的插件。比如，我们可以用jquery-loading插件来实现这个效果。代码如下：

<div id="loading"></div>

$('#loading').loading();

以上就是“CSS实现一个简单loading动画效果”的攻略，希望对你有所帮助。