loading效果在实际开发中是很常见的，尤其是在Ajax请求的时候，可以给用户一个很好的交互体验。

以前大部分web开发加载(loading)特效是采用gif图片形式展现，随着html5+css3技术的成熟，纯CSS3版本Loading加载动画效果已经可以比拟gif动画效果。

通过css3实现loading动画，主要用到的属性：

@keyframes：用于定义动画
animation：用于使用动画

实现效果

代码如下

实现上述效果，我们首先定义一个div容器，里面包含4个空的div，然后定义rotate旋转的动画，对每个子div设置动画延迟进行实现。

<div class="load_3">
	<div></div><div></div><div></div><div></div>
</div>

<style>
.load_3 {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.load_3 div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #61E8EA;
  border-radius: 50%;
  animation: load_3 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #61E8EA transparent transparent transparent;
}
.load_3 div:nth-child(1) {
  animation-delay: -0.45s;
}
.load_3 div:nth-child(2) {
  animation-delay: -0.3s;
}
.load_3 div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes load_3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

工具推荐

该工具共20多种不同的loading效果，全部使用animation帧动画制作而成。这些特效代码简洁，效果炫酷，非常值得学习借鉴。

地址：点击进入

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11184