10+个让你的项目大放异彩的CSS loading加载特效

CSS loading加载特效对于网站和应用程序的用户体验至关重要，因为它们可以让用户知道正在等待的任务已经在进行中。当用户在网站或应用程序中进行交互时，如果点击一个按钮或链接需要等待一段时间，这段时间无论是多长，它都会让用户感到非常烦躁和无聊。CSS loading加载特效通过增加动画和渐变，可以为用户提供一种视觉上的反馈，告诉他们正在进行的任务仍在进行中。在本文中，我们将介绍一些非常棒的CSS loading加载特效，这些特效可以让您的项目更加引人注目和有趣。

1. 旋转圆形加载动画

1.1. 效果描述

这个模板使用了纯CSS来创建一个有趣的旋转圆形加载动画。当您的项目需要更多时间才能完成时，这个展示就可以让用户知道它仍在进行中。

1.2. 代码实现

.loading{
  width: 40px;
  height: 40px;
  margin: 100px auto;
  animation: loading 0.5s linear infinite;
}
.loading:after{
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  margin: 2px;
  border-radius: 50%;
  border: 5px solid #3f3f3f;
  border-color: #3f3f3f transparent transparent transparent;
  animation: loading 1s linear infinite;
}
@keyframes loading{
  from{
    transform: rotate(0deg);
  }to{
    transform: rotate(360deg);
  }
}

1.3. 代码解读

这个CSS loading加载特效使用了@keyframes关键字来创建一个名为loading的旋转动画。该动画将从0度旋转到360度，实现了一个完整的旋转。在伪元素:before和:after中，使用了border属性和border-radius属性创建了圆形。在伪元素:after中，为了使圆形呈现出由浅入深的颜色，为其添加了一个渐变的边框颜色。

2. 圆形进度条加载动画

2.1. 效果描述

这个模板使用了圆形进度条和CSS动画来创建一个非常棒的加载动画。这个动画可以很好地和您的项目融合在一起，它可以让用户知道正在进行的任务在不断变化，并且还剩下多少时间。

2.2. 代码实现

.loading{
  width: 40px;
  height: 40px;
  margin: 20px auto;
  position: relative;
}
.loading:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: solid 2px transparent;
  border-top-color: #16a085;
  animation: loading 1s linear infinite;
}
@keyframes loading{
  from{
    transform: rotate(0deg);
  }to{
    transform: rotate(360deg);
  }
}

2.3. 代码解读

这个CSS loading加载特效使用了:before伪元素和border-top-color属性来创建圆形进度条。定义了一个名为loading的动画，从0到360度旋转。这个动画可以很好地让用户知道任务还剩下多少时间。使用position:relative属性将其相对位置设置为其父元素，可以在使用它时进行灵活排列。

3. 缩放加载动画

3.1. 效果描述

这个模板使用了纯CSS动画，可以在加载内容时为用户提供非常棒的视觉反馈。用户将看到一个方块在加载时缩放，非常酷炫。

3.2. 代码实现

.loading{
  width: 40px;
  height: 40px;
  margin: 20px auto;
  position: relative;
}
.loading:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(0);
  border-radius: 50%;
  background-color: #16a085;
  animation: loading 1s ease-in-out infinite;
}
@keyframes loading{
  from{
    opacity: 1;
    transform: scale(0);
  }to{
    opacity: 0;
    transform: scale(1);
  }
}

3.3. 代码解读

这个CSS loading加载特效使用了:before伪元素和scale()属性来创建缩放加载动画。定义了一个名为loading的动画，从0到360度旋转。这个动画可以很好地让用户知道任务还剩下多少时间。使用position:relative属性将其相对位置设置为其父元素，可以在使用它时进行灵活排列。

4. 转盘加载动画

4.1. 效果描述

这个模板使用了纯CSS来创造一个很棒的转盘加载动画，可以在加载内容时为用户提供视觉反馈。用户将看到一个方块在加载时缩放，非常酷炫。

4.2. 代码实现

.loading{
  width: 40px;
  height: 40px;
  margin: 20px auto;
  position: relative;
}
.loading:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  border-radius: 50%;
  border: 5px solid #16a085;
  border-bottom-color: transparent;
  animation: loading 1s ease-in-out infinite;
}
@keyframes loading{
  from{
    transform: rotate(0deg);
  }to{
    transform: rotate(360deg);
  }
}

4.3. 代码解读

这个CSS loading加载特效使用了:before伪元素和border属性创建了转盘。定义了一个名为loading的动画，从0到360度旋转。这个动画可以很好地让用户知道任务还剩下多少时间。使用position:relative属性将其相对位置设置为其父元素，可以在使用它时进行灵活排列。

5. 加载圆环动画

5.1. 效果描述

这个模板使用了纯CSS的边框动画创造了一个美丽的圆环加载动画。当您的项目需要一些额外时间时，这个动画可以告诉用户它仍在进行中。

5.2. 代码实现

.loading{
  width: 40px;
  height: 40px;
  margin: 20px auto;
  position: relative;
}
.loading:before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #16a085;
  border-top-color: transparent;
  animation: loading 1s ease-in-out infinite;
}
@keyframes loading{
  from{
    transform: rotate(0deg);
  }to{
    transform: rotate(360deg);
  }
}

5.3. 代码解读

这个CSS loading加载特效使用了:before伪元素和border属性创建了一个具有流动性的圆环。定义了一个名为loading的动画，从0到360度旋转。这个动画可以很好地让用户知道任务还剩下多少时间。使用position:relative属性将其相对位置设置为其父元素，可以在使用它时进行灵活排列。

6. 加载翻转动画

6.1. 效果描述

这个模板使用了纯CSS进行翻转动画，可以在加载内容时为用户提供视觉反馈。用户将看到一个方块在加载时翻转，非常酷炫。

6.2. 代码实现

.loading{
  width: 40px;
  height: 40px;
  margin: 20px auto;
  position: relative;
  transform-style: preserve-3d;
  animation: loading 1s linear infinite;
}
.loading:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #16a085;
  transform: rotateX(0deg);
  animation: flip 1s linear infinite;
}
@keyframes loading{
  from{
    transform: rotateY(0deg);
  }to{
    transform: rotateY(360deg);
  }
}
@keyframes flip{
  from{
    transform: rotateX(0deg);
  }to{
    transform: rotateX(180deg);
  }
}

6.3. 代码解读

这个CSS loading加载特效使用了:before伪元素和transform属性来创建翻转加载动画。定义了一个名为loading的动画，从0到360度旋转。这个动画可以让用户知道任务还剩下多少时间。使用position:relative属性将其相对位置设置为其父元素，可以在使用它时进行灵活排列。

总结

在这篇文章中，我们介绍了六种不同类型的CSS loading加载特效。当您的项目需要一些额外时间来加载信息时，这些动画效果是非常有用的。通过使用这些CSS加载动画，您可以为您的项目提供出色的用户体验，使其更加引人注目和有趣。