[分享]css3实现圆形齿轮

CSS3 的强大特性可以让我们轻松地实现各种有趣的效果。其中，圆形齿轮是一个很有趣的例子，让我们一起探索如何使用 CSS3 实现这样的效果。 .gear { width: 100px; height:...

CSS3 的强大特性可以让我们轻松地实现各种有趣的效果。其中，圆形齿轮是一个很有趣的例子，让我们一起探索如何使用 CSS3 实现这样的效果。

 .gear {
    width: 100px;
    height: 100px;

    /* 设置齿轮中心的位置 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* 设置齿轮的背景色和边框 */
    background-color: #ffd54f;
    border: 5px solid #c89f07;

    /* 设置齿轮的圆角 */
    border-radius: 50%;

    /* 添加齿轮中的旋转轴 */
    &:before {
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      background-color: #c89f07;

      /* 将旋转轴设为齿轮的中心 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;

      /* 使用z-index将旋转轴放置到最上方 */
      z-index: 1;
    }

    /* 添加齿轮的齿 */
    &:after {
      content: "";
      display: block;
      width: 30px;
      height: 30px;

      /* 将齿放置到齿轮中心 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      /* 设置齿的颜色和形状 */
      background-color: #c89f07;
      border-radius: 5px;

      /* 使用box-shadow制作阴影效果，让齿更加立体 */
      box-shadow:
        0 0 5px #c89f07,
        0 0 10px #c89f07,
        0 0 15px #c89f07,
        0 0 20px #c89f07,
        0 0 25px #c89f07,
        0 0 30px #c89f07,
        0 0 35px #c89f07;
    }
  } 

以上是实现圆形齿轮的 CSS3 代码，主要使用了圆角和旋转的特性，加上一定的阴影效果，让整个齿轮看起来更加立体。

如果你想要实现多个齿轮互动的效果，可以使用 CSS3 的动画、过渡等技术。代码中的齿数、位置、填充色等也可以根据自己的需求进行调整。