效果实现：神奇加载效果赋予网站灵魂

前端

2023-11-06 09:22:39

序言

想象一下，当你访问一个网站时，页面空白了好几秒，没有任何反应。你会不会觉得很烦躁？相信大多数人的答案都是肯定的。这就是为什么网站需要加载动画来让用户在等待时感到愉悦。

loading效果是指网站在加载过程中显示的动画效果，它可以使网站看起来更加活泼有趣，也可以让用户知道网站正在加载中，不必担心网站卡死。常见的loading效果包括进度条、旋转圆圈、跳动的小球等。

实现loading效果的方法

实现loading效果的方法有很多，下面介绍几种常用的方法：

1. 使用gif或iconfont

使用gif或iconfont是最简单的方法。只需将gif或iconfont文件上传到网站，然后在HTML代码中引用即可。例如，以下代码可以引用一个名为"loading.gif"的gif文件：

<img src="loading.gif" alt="Loading..." />

2. 使用border-radius

使用border-radius也可以实现loading效果。具体方法是将一个div元素的border-radius属性设置为50%，然后通过CSS动画来改变div元素的border-color属性。例如，以下代码可以实现一个旋转的圆形loading效果：

<div class="loading"></div>

.loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

3. 使用canvas、svg和border-radius实现loading

使用canvas、svg和border-radius可以实现更复杂的loading效果。例如，以下代码可以实现一个带有进度条的loading效果：

<canvas id="loading" width="200" height="20"></canvas>

<script>
  var canvas = document.getElementById("loading");
  var ctx = canvas.getContext("2d");

  // 绘制进度条背景
  ctx.fillStyle = "#ccc";
  ctx.fillRect(0, 0, 200, 20);

  // 绘制进度条
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, 100, 20);

  // 绘制边框
  ctx.strokeStyle = "#000";
  ctx.lineWidth = 1;
  ctx.strokeRect(0, 0, 200, 20);

  // 绘制圆角
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 0);
  ctx.lineTo(200, 20);
  ctx.lineTo(0, 20);
  ctx.closePath();
  ctx.stroke();

  // 动画
  var progress = 0;
  function animate() {
    progress += 1;
    if (progress > 100) {
      progress = 0;
    }
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, progress, 20);
    requestAnimationFrame(animate);
  }
  animate();
</script>

4. 绘制loading圆

使用JavaScript代码和css3属性也可以实现loading效果。例如，以下代码可以实现一个带有进度条的loading效果：

<div class="loading">
  <div class="progress"></div>
</div>

.loading {
  width: 200px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
}

.progress {
  width: 0%;
  height: 100%;
  background-color: #000;
  animation: progress 1s linear infinite;
}

@keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}