[分享]css3动画齿轮转动

CSS3动画是现在Web开发中非常热门的技术之一，它能够帮助我们实现一些炫酷的效果。在本文中，我将为大家介绍如何使用CSS3动画来制作一个齿轮转动的效果。/ 齿轮样式 / .gear { : rela...

CSS3动画是现在Web开发中非常热门的技术之一，它能够帮助我们实现一些炫酷的效果。在本文中，我将为大家介绍如何使用CSS3动画来制作一个齿轮转动的效果。

/* 齿轮样式 */
.gear {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #444;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 0 0 10px 10px rgba(0, 0, 0, 0.2) inset;
}

.gear:before,
.gear:after {
  content: "";
  position: absolute;
  top: 40px;
  left: 55px;
  width: 40px;
  height: 70px;
  background-color: #444;
  border-radius: 10px;
  transform-origin: 50% 100%;
  animation: rotate 2s infinite linear;
}

.gear:before {
  transform: rotate(50deg);
}

.gear:after {
  transform: rotate(-50deg);
}

/* 齿轮动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} 

首先，我们需要创建一个样式为“gear”的div元素，并设置它的样式，包括宽度、高度、背景颜色、边框、圆角等属性。然后，我们创建两个伪元素“before”和“after”，分别作为齿轮的左边和右边齿轮。这两个元素的样式包括大小、位置、背景颜色、圆角以及动画相关的属性。

接下来，我们创建一个名为“rotate”的动画，它将从0度旋转到360度，并且无限循环。我们将这个动画绑定到了齿轮的“before”和“after”元素上，这样它们就能顺时针和逆时针地旋转起来。

现在，我们已经完成了制作齿轮动画的所有步骤。这个效果看起来非常酷，可以用来装饰一些机械或者工业主题的网页。大家也可以根据这个思路，尝试制作一些其他的3D旋转效果。