使用css3制作齿轮loading动画效果

下面是制作齿轮loading动画效果的完整攻略。

1. 准备工作

在制作之前首先需要进行准备工作：

确定齿轮的大小和数量
选择合适的颜色和样式
编写 HTML 结构

在 HTML 结构中，我们需要定义一个外层盒子和多个齿轮的盒子。代码如下：

<div class="gear-group">
  <div class="gear"></div>
  <div class="gear"></div>
  <div class="gear"></div>
  <div class="gear"></div>
</div>

2. 利用 CSS3 制作齿轮

利用 CSS3 制作齿轮的过程主要涉及到以下几点：

制作齿轮的框架
定义齿轮的样式
利用 transform 和动画制作齿轮的旋转和停止

制作齿轮的框架

首先为齿轮的外层盒子设置宽度和高度，以及相对或绝对定位。

.gear-group {
  position: relative;
  width: 100px;
  height: 100px;
}

接着为每个齿轮的盒子设置宽度和高度，并利用定位使其在外层盒子中居中。同时为了让齿轮的动画效果更佳明显，我们还可以为每个齿轮的盒子添加背景颜色、边框样式等。

.gear {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 2px solid #333;
  border-radius: 50%;
  background: #fff;
}

定义齿轮的样式

在定义每个齿轮的样式时，我们需要进行以下几个步骤：

定义齿轮的齿数
定义齿轮的齿的样式
定义齿轮的轮毂样式

第一步，定义齿轮的齿数并利用 border-radius 制作齿的形状。同时可以为齿轮定义不同的 z-index 值，以便于后面的层叠效果。

.gear:nth-child(1) {
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  z-index: 4;
}
.gear:nth-child(2) {
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  z-index: 3;
}
.gear:nth-child(3) {
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
  z-index: 2;
}
.gear:nth-child(4) {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  z-index: 1;
}
.gear::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 14px solid #fff;
  border-bottom: 25px solid transparent;
  transform: rotate(45deg);
}
.gear::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-right: 14px solid #fff;
  border-bottom: 25px solid transparent;
  transform: rotate(-45deg);
}

第二步，定义齿轮的轮毂样式，可以利用上面定义的 z-index 值进行层叠效果的制作。

.gear:before {
  position: absolute;
  content: "";
  width: 14px;
  height: 50px;
  background: #ccc;
  left: 50%;
  margin-left: -7px;
  top: -2px;
  z-index: -1;
}

利用 transform 和动画制作齿轮的旋转和停止

接下来利用 transform 和动画制作齿轮的旋转和停止。

首先为每个齿轮设置相应的动画名称和动画延迟时间。

.gear:nth-child(1) {
  animation: rotate 4s infinite linear;
  animation-delay: 0s;
}
.gear:nth-child(2) {
  animation: rotate 4s infinite linear;
  animation-delay: -2s;
}
.gear:nth-child(3) {
  animation: rotate 4s infinite linear;
  animation-delay: -4s;
}
.gear:nth-child(4) {
  animation: rotate 4s infinite linear;
  animation-delay: -6s;
}

接着我们需要定义 rotate 这个动画名称的具体过程。在动画中我们需要利用 transform 实现齿轮的旋转和停止。具体做法如下：

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

3. 完整代码示例

下面是一个完整的代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>齿轮loading动画效果</title>
    <style>
      .gear-group {
        position: relative;
        width: 100px;
        height: 100px;
      }
      .gear {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        border: 2px solid #333;
        border-radius: 50%;
        background: #fff;
      }
      .gear:nth-child(1) {
        border-bottom-left-radius: 50px;
        border-top-left-radius: 50px;
        z-index: 4;
        animation: rotate 4s infinite linear;
        animation-delay: 0s;
      }
      .gear:nth-child(2) {
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        z-index: 3;
        animation: rotate 4s infinite linear;
        animation-delay: -2s;
      }
      .gear:nth-child(3) {
        border-bottom-right-radius: 50px;
        border-top-right-radius: 50px;
        z-index: 2;
        animation: rotate 4s infinite linear;
        animation-delay: -4s;
      }
      .gear:nth-child(4) {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        z-index: 1;
        animation: rotate 4s infinite linear;
        animation-delay: -6s;
      }
      .gear::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-left: 14px solid #fff;
        border-bottom: 25px solid transparent;
        transform: rotate(45deg);
      }
      .gear::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-right: 14px solid #fff;
        border-bottom: 25px solid transparent;
        transform: rotate(-45deg);
      }
      .gear:before {
        position: absolute;
        content: "";
        width: 14px;
        height: 50px;
        background: #ccc;
        left: 50%;
        margin-left: -7px;
        top: -2px;
        z-index: -1;
      }
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(180deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="gear-group">
      <div class="gear"></div>
      <div class="gear"></div>
      <div class="gear"></div>
      <div class="gear"></div>
    </div>
  </body>
</html>

4. 示例说明

下面给出两个制作齿轮loading动画效果的示例说明：

示例一

我要制作一组 6 个齿轮的 loading 动画效果，具体步骤如下：

制作齿轮的框架，确定齿轮的大小和数量；
根据齿轮的样式定义具体的 CSS 样式；
利用 transform 和动画制作齿轮的旋转和停止；
在 HTML 结构中添加额外的齿轮盒子。

示例二

我要对现有的 4 个齿轮的 loading 动画进行优化，把齿轮改为黄色和蓝色，同时让齿轮旋转速度变快，具体步骤如下：

在齿轮的样式定义中更改背景颜色；
调整动画的延迟和旋转速度。

以上就是“使用 CSS3 制作齿轮 loading 动画效果”的完整攻略，希望能够对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用css3制作齿轮loading动画效果 - Python技术站