CSS加载动画：10种炫酷效果，让你的网页瞬间提升逼格

2023-02-26 09:30:52

10 款 CSS 加载动画，为你的网站注入活力

在网络世界中，时间就是金钱。没有人愿意长时间等待网页加载。加载动画可以有效地弥补这段等待时间，提升用户体验。本文将介绍 10 款纯 CSS 实现的加载动画，让你轻松为网站增添一抹创意和活力。

1. 旋转圆圈：永恒的经典

这是一个最常见也是最简单的加载动画。使用 CSS 的 animation 属性，你可以让一个圆圈不断旋转，象征着后台仍在努力工作。

.spinner-1 {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

2. 跳动方块：活泼灵动

这款加载动画同样简单，但更具吸引力。使用 animation 和 transform 属性，你可以让一个方块上下跳动，仿佛迫不及待地想完成加载。

.spinner-2 {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  animation: bounce 1s linear infinite;
}

@keyframes bounce {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

3. 脉冲圆圈：现代感十足

这款加载动画效果十足，能让你的网站瞬间提升逼格。利用 animation 和 box-shadow 属性，你可以让一个圆圈不断变大变小，犹如心脏的脉搏。

.spinner-3 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: pulse 1s linear infinite;
  box-shadow: 0 0 0 4px #ccc, 0 0 0 8px #ccc, 0 0 0 12px #ccc;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 4px #ccc;
  }
  50% {
    box-shadow: 0 0 0 8px #ccc;
  }
  100% {
    box-shadow: 0 0 0 12px #ccc;
  }
}

4. 旋转弧线：优雅至极

这款加载动画非常优雅，能让你的网站看起来更加精致。通过 animation 和 border-radius 属性，你可以让一个弧线不断旋转，仿佛时间在不停地流逝。

.spinner-4 {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-radius: 50%;
  animation: rotate-arc 1s linear infinite;
}

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

5. 加载条：直观实用

这款加载动画非常实用，可以让你轻松地向用户展示加载的进度。使用 animation 和 width 属性，你可以让一个条形不断变长，直观地反映加载过程。

.spinner-5 {
  width: 100%;
  height: 4px;
  background-color: #ccc;
  animation: load 1s linear infinite;
}

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

6. 跳动球：萌趣十足

这款加载动画非常可爱，可以为你的网站增添一抹活泼。使用 animation 和 transform 属性，你可以让一个球体上下跳动，仿佛在迫不及待地等待。

.spinner-6 {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  animation: bounce-ball 1s linear infinite;
}

@keyframes bounce-ball {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

7. 旋转风车：趣味盎然

这款加载动画非常有趣，可以为你的网站增添一丝生动。使用 animation 和 transform 属性，你可以让一个风车不断旋转，仿佛在召唤用户耐心等待。

.spinner-7 {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: windmill 1s linear infinite;
}

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

8. 脉冲方块：时尚前卫

这款加载动画非常时尚，可以为你的网站注入一股现代感。通过 animation 和 box-shadow 属性，你可以让一个方块不断变大变小，仿佛在呼吸一般。

.spinner-8 {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  animation: pulse-square 1s linear infinite;
  box-shadow: 0 0 0 4px #ccc, 0 0 0 8px #ccc, 0 0 0 12px #ccc;
}

@keyframes pulse-square {
  0% {
    box-shadow: 0 0 0 4px #ccc;
  }
  50% {
    box-shadow: 0 0 0 8px #ccc;
  }
  100% {
    box-shadow: 0 0 0 12px #ccc;
  }
}

9. 跳动心形：浪漫温馨

这款加载动画非常浪漫，可以为你的网站增添一抹温馨。使用 animation 和 transform 属性，你可以让一个心形上下跳动，仿佛在传递着爱意。

.spinner-9 {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  animation: bounce-heart 1s linear infinite;
}

@keyframes bounce-heart {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

10. 旋转齿轮：工业风范

这款加载动画非常工业风，可以为你的网站注入一股酷炫。使用 animation 和 transform 属性，你可以让一个齿轮不断旋转，仿佛在象征着网站背后的繁忙工作。

.spinner-10 {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin-gear 1s linear infinite;
}

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