CSS 实现各种 Loading 效果附带解析过程

让我来详细讲解“CSS 实现各种 Loading 效果附带解析过程”的完整攻略。

什么是 Loading 效果？

Loading 效果指的是在 Web 应用程序加载数据或执行长时间任务时，网页会显示一种状态，以表示正在加载系统或应用程序。例如，百度、谷歌、淘宝等网站在页面加载时会出现一个菊花图或一个圆圈不断旋转的动画。

怎么实现各种 Loading 效果？

实现方法

实现各种 Loading 效果最常用的方法是使用 CSS3 的动画属性来创建。CSS3 是一种用于美化 Web 应用程序的新型技术，提供了许多用于创建动画的属性和功能。这里介绍一些常用的 CSS 属性来创建 Loading 效果：

• animation: name duration timing-function delay iteration-count direction fill-mode;

这是创建动画的基本属性。其中，name 指定动画的名称；duration 指定动画持续时间；timing-function 指定动画速度曲线；delay 指定动画开始之前的延迟时间；iteration-count 指定动画的重复次数；direction 指定动画方向；fill-mode 指定动画结束后的行为。

• @keyframes name { /* Rules */ }

这是定义动画的属性。其中，name 指定动画的名称，Rules 指定动画的关键帧，以百分比表示。

示例

这里提供两个常用的 Loading 效果示例。

菊花转动效果

HTML 代码如下：

<div class="lds-ring"><div></div><div></div><div></div><div></div></div>

CSS 代码如下：

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #000;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #000 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

效果如下：

圆圈转动效果

HTML 代码如下：

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

CSS 代码如下：

.loading {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    position: relative;
}
.loading div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 0;
  border: 10px solid #29ABE2;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-top-color: transparent;
  animation: loading 1s linear infinite;
}
.loading div:nth-child(1) {
  border-color: #BD2532;
  animation-delay: 0s;
}
.loading div:nth-child(2) {
  border-color: #E6C026;
  animation-delay: 0.1s;
}
.loading div:nth-child(3) {
  border-color: #29ABE2;
  animation-delay: 0.2s;
}
.loading div:nth-child(4) {
  border-color: #80C41C;
  animation-delay: 0.3s;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

效果如下：

总结

以上是“CSS 实现各种 Loading 效果附带解析过程”的详细攻略，通过对不同 Loading 效果的示例说明，可以帮助开发者更好地理解如何使用 CSS3 创建各种 Loading 效果。在实际开发中，我们可以根据需要调整 CSS 属性和值，以得到更加满意的效果。