使用CSS3实现一个齿轮动画效果

"```markdown 首先，我们需要创建一个HTML结构来表示齿轮。在CSS中，我们使用@keyframes规则创建动画。我们将利用旋转和缩放来实现齿轮的动画效果。

<div class=\"gear\">
  <div class=\"tooth\"></div>
  <div class=\"tooth\"></div>
  <div class=\"tooth\"></div>
  <div class=\"tooth\"></div>
</div>

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

.tooth {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #333;
  top: 0;
  left: 45px;
  transform-origin: 50% 100%;
  animation: rotate 2s infinite linear;
}

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

.tooth:nth-child(2) {
  transform: rotate(45deg);
}

.tooth:nth-child(3) {
  transform: rotate(90deg);
}

.tooth:nth-child(4) {
  transform: rotate(135deg);
}

在上面的代码中，我们创建了一个表示齿轮的HTML结构，并使用CSS对其进行样式设置。我们定义了齿的形状和位置，并通过@keyframes规则创建了一个旋转动画。通过调整每个齿的旋转角度，我们可以实现齿轮转动的效果。调整动画的持续时间、缓动函数等参数可以改变动画效果的表现形式。这样，我们就成功实现了一个简单的齿轮动画效果。