CSS精采动画合集：让等待成为一种享受！

在当今以体验为王的互联网时代，网页加载速度和用户体验成为衡量网站成功与否的关键因素。而加载动画则扮演着点缀等待的旅程，提升用户体验的重要角色。

纯CSS加载动画不仅可以掩饰加载过程的延迟，还能赋予网站更多趣味性和灵活性。本文将介绍6种精彩的CSS加载动画，让你的网站在等待中也魅力十足。

1. 点点点加载

点点点加载是一种简单却有效的加载动画。它由三个连续跳动的点组成，给人以期待和动感之感。

代码：

.dot-loading {
  width: 50px;
  height: 50px;
  position: relative;
}

.dot-loading .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
  animation: dot-loading 1s infinite alternate;
}

.dot-loading .dot:nth-child(2) {
  left: 15px;
}

.dot-loading .dot:nth-child(3) {
  left: 30px;
}

@keyframes dot-loading {
  0% {
    top: 0;
  }
  50% {
    top: 15px;
  }
  100% {
    top: 0;
  }
}

2. 条形加载条

条形加载条是一种经典的加载动画。它由一条不断增长的进度条组成，给人以明确的加载进度感。

代码：

.progress-bar {
  width: 500px;
  height: 30px;
  background-color: #eee;
  border: 1px solid #333;
  position: relative;
}

.progress-bar .progress {
  width: 0;
  height: 30px;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
  animation: progress-bar 1s infinite;
}

@keyframes progress-bar {
  0% {
    width: 0;
  }
  100% {
    width: 500px;
  }
}

3. 圆环加载

圆环加载是一种简洁大方的加载动画。它由一个不断旋转的圆环组成，给人以动感和平衡之感。

代码：

.circular-loading {
  width: 50px;
  height: 50px;
  border: 5px solid #333;
  border-radius: 50%;
  position: relative;
  animation: circular-loading 1s infinite;
}

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

4. 圆圈扩散加载

圆圈扩散加载是一种充满活力的加载动画。它由一个不断扩散的圆圈组成，给人以轻盈和希望之感。

代码：

.circle-loading {
  width: 50px;
  height: 50px;
  position: relative;
}

.circle-loading .circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
  animation: circle-loading 1s infinite alternate;
}

.circle-loading .circle:nth-child(2) {
  left: 15px;
}

.circle-loading .circle:nth-child(3) {
  left: 30px;
}

@keyframes circle-loading {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

5. 悬浮球进度加载

悬浮球进度加载是一种新颖有趣的加载动画。它由一个不断上升的悬浮球组成，给人以轻盈和有趣的之感。

代码：

.floating-ball-loading {
  width: 50px;
  height: 50px;
  position: relative;
}

.floating-ball-loading .ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
  animation: floating-ball-loading 1s infinite;
}

@keyframes floating-ball-loading {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
  }
  100% {
    top: 0;
  }
}

6. 楼梯循环加载

楼梯循环加载是一种具有设计感的加载动画。它由一个不断循环上升的楼梯组成，给人以韵律和希望之感。

代码：

.stairs-loading {
  width: 50px;
  height: 50px;
  position: relative;
}

.stairs-loading .stair {
  width: 10px;
  height: 10px;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
  animation: stairs-loading 1s infinite;
}

.stairs-loading .stair:nth-child(2) {
  top: 10px;
}

.stairs-loading .stair:nth-child(3) {
  top: 20px;
}

.stairs-loading .stair:nth-child(4) {
  top: 30px;
}

@keyframes stairs-loading {
  0% {
    top: 0;
  }
  25% {
    top: 10px;
  }
  50% {
    top: 20px;
  }
  75% {
    top: 30px;
  }
  100% {
    top: 0;
  }
}