CSS 实现多款 Loading 效果，代码附解析

前端

2023-10-18 08:52:09

各位技术爱好者，大家好！今天，我们深入探讨 CSS 中实现各种 Loading 效果的奥秘。无论是创建引人注目的网站加载动画还是提升用户交互的动效，CSS 都能满足我们的需求。准备好在代码中释放你的创造力，让你的网页充满活力吧！

圆形和长方形动画：旋转的魅力

首先，让我们从一个简单的圆形 Loading 效果开始。通过创建两个具有半透明度的 div 元素，并在其上设置相同的动画，我们可以实现交替放大缩小效果。巧妙运用不同的延迟时间，就能营造出令人着迷的旋转视觉体验。

对于长方形元素，我们只需要在 Y 轴上应用缩放动画，并再次通过延迟时间控制元素依次变化。这样就能得到一个整齐排列的长方形序列，以流畅的方式依次出现和消失。

方块和齿轮动画：跳动的节奏

接下来，我们提升难度，使用 CSS 创建更复杂的方块和齿轮 Loading 效果。对于方块，我们利用动画属性使其在不同的方向上跳动，营造出一种生动的韵律感。

齿轮动画则需要更巧妙的技巧。我们将使用多个齿轮状的元素，通过巧妙的旋转动画，模拟齿轮啮合的运动。通过控制每个齿轮的延迟和速度，我们可以创造出令人惊叹的机械效果。

代码示例：点亮你的创造力

现在，让我们深入代码。以下示例演示了我们刚才讨论的 Loading 效果：

/* 圆形效果 */
.spinner {
  position: relative;
  width: 100px;
  height: 100px;
}

.spinner div {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  opacity: 0.5;
  animation: spin 1s linear infinite alternate;
}

@keyframes spin {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}

/* 长方形效果 */
.rectangle-spinner {
  position: relative;
  width: 100px;
  height: 20px;
}

.rectangle-spinner div {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #000;
  animation: bounce 0.5s linear infinite alternate;
}

@keyframes bounce {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

/* 方块效果 */
.cube-spinner {
  position: relative;
  width: 100px;
  height: 100px;
}

.cube-spinner div {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #000;
  animation: cube 0.5s linear infinite alternate;
}

@keyframes cube {
  from {
    transform: translateX(0) translateY(0) rotateZ(0deg);
  }
  to {
    transform: translateX(20px) translateY(20px) rotateZ(90deg);
  }
}

/* 齿轮效果 */
.gear-spinner {
  position: relative;
  width: 100px;
  height: 100px;
}

.gear-spinner div {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #000;
  animation: gear 0.5s linear infinite;
}

@keyframes gear {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}