CSS动画做成齿轮转动效果

CSS动画可以帮助我们实现各种炫酷的效果，其中齿轮转动效果是一种非常常见的动画效果。对于初学者来说，了解如何实现这种效果是非常重要的。

在实现齿轮转动效果时，我们可以使用CSS3中的transform属性和animation属性。transform属性用于旋转图像，而animation属性，则是用于制作动画。

.gear {
  background: #fff;
  border-radius: 50%;
  Box-shadow: inset 0px 0px 20px rgba(0,0.1),0px 0px 20px rgba(0,0.1);
  height: 100px;
  position: absolute;
  width: 100px;
}

.gear-inner {
  background: #444;
  border-radius: 50%;
  height: 60px;
  margin: calc(20px / 2);
  width: 60px;
}

.gear-outer {
  animation: rotate 3s infinite linear;
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  transform-origin: 50% 50%;
  width: 100px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

以上代码中，我们首先定义了一个类名为gear的样式，用于定义齿轮的样式，包括背景、边框、大小和位置等元素。

然后定义了类名为gear-inner的样式，用于定义齿轮中心的样式，包括背景色、大小和位置等元素。

最后，我们定义了类名为gear-outer的样式，使用animation属性制作动画。在这个样式中，我们设置了动画名称为rotate，持续时间为3秒，重复次数为无限，以线性方式进行动画。另外，我们还设置了齿轮的旋转中心为50% 50%，也就是齿轮的中心位置。在@keyframes中，我们定义了从0度到360度的动画，实现转动效果。

综上，通过使用CSS3中的transform属性和animation属性，我们可以轻松地实现齿轮转动效果。