前军教程网

当今，随着互联网的不断发展，Loading特效已经成为了一个网页设计中不可或缺的部分。一个好的Loading特效不仅可以提高用户的等待耐心，还能为网页增添更多的时尚和吸引力。本文将介绍一种使用纯CSS实现不断放大缩小和渐变的Loading特效的方法，帮助你为你的网页应用程序添加一个具有吸引力的Loading特效。

在本文中，我们将向你介绍如何使用CSS的关键帧动画和渐变，以及CSS3的变换功能，来实现一个具有动态效果的Loading特效。我们将提供详细的步骤和代码示例，帮助你快速掌握这个特效的实现方法。

无论你是一个网页设计师还是开发人员，本文都会为你提供非常有价值的信息和技巧。通过学习如何使用纯CSS实现不断放大缩小和渐变的Loading特效，你将能够为你的网页应用程序添加一个独特的、时尚的和具有吸引力的Loading特效，从而提高你的应用程序的用户体验和用户满意度，吸引更多的用户和客户。

这是我收集到的117个Loading特效里的第4个。

<div class="loading"></div>

<style>
.loading {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: #000;

  animation: ball-scale infinite linear 0.75s;
}

@keyframes ball-scale {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
</style>

演示地址：http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading

代码仓库：https://gitee.com/k21vin/front-end-data-visualization/tree/master/src/views/Native/PureCSS/pages/Loading/components