在css中如何制作加载动画

P粉602998670 2025-10-12 00:00:00 次阅读

答案：CSS加载动画通过@keyframes定义关键帧，结合transform、opacity等属性实现。1. 旋转圆圈利用border差异与rotate创建持续旋转效果；2. 脉冲波动画使用scale和opacity变化模拟扩散波纹；3. 多点跳动通过多个圆点设置不同animation-delay实现错落跳动；4. 自定义线条动画借助伪元素与translateX、scaleX制作进度条式动效。核心在于合理运用animation与可动画属性，追求简洁流畅的视觉体验。

在CSS中制作加载动画，主要是利用 @keyframes 定义动画关键帧，并结合 transform、opacity 等属性实现视觉动效。下面介绍几种常见且实用的加载动画实现方式。

1. 旋转圆圈加载动画

这是最常见的加载效果，使用一个圆形元素不断旋转。

对应的CSS：

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

说明：通过改变 border-top 颜色制造视觉差，配合 rotate 实现持续旋转。

2. 脉冲波（呼吸）动画

模拟心跳或扩散效果，常用于提示等待状态。

.loader {
  width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  opacity: 0.6;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0.6;
  }
}

这个动画通过缩放和透明度变化，形成向外扩散的“波纹”感。

3. 多点跳动动画

三个小球依次上下跳动，常用于现代UI设计。

.loader {
  display: flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  background: #3498db;
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
}

HTML结构：

每个点设置不同延迟，形成错落有致的跳动节奏。

4. 自定义线条动画

使用伪元素创建动态线条加载效果。

.loader::before {
  content: '';
  display: block;
  width: 50px;
  height: 5px;
  background: linear-gradient(90deg, #3498db, #e74c3c);
  border-radius: 3px;
  animation: slide 1.5s ease-in-out infinite;
}

@keyframes slide {
  0% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(100px) scaleX(0.2); }
  100% { transform: translateX(0) scaleX(1); }
}

这种适合做进度条或内容加载指示器。

基本上就这些。核心是掌握 @keyframes 和 animation 属性的使用，再结合 transform、opacity 等可动画属性自由发挥。加载动画不需要复杂代码，简洁流畅更重要。