当前位置：首页 > CSS

css制作齿轮

2026-02-12 21:28:34CSS

CSS 制作齿轮的方法

使用CSS可以创建各种形状，包括齿轮。以下是几种实现齿轮效果的方法：

使用伪元素和旋转

通过旋转多个伪元素来模拟齿轮的齿状边缘：

.gear {
  width: 100px;
  height: 100px;
  background-color: #333;
  border-radius: 50%;
  position: relative;
}

.gear::before,
.gear::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 40px;
  background-color: #333;
  top: -20px;
  left: 40px;
}

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

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

使用多个子元素

创建多个矩形元素并旋转它们形成齿轮：

<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;
  background-color: #333;
  border-radius: 50%;
  position: relative;
}

.tooth {
  width: 20px;
  height: 40px;
  background-color: #333;
  position: absolute;
  top: -20px;
  left: 40px;
}

.tooth:nth-child(1) { transform: rotate(0deg); }
.tooth:nth-child(2) { transform: rotate(90deg); }
.tooth:nth-child(3) { transform: rotate(180deg); }
.tooth:nth-child(4) { transform: rotate(270deg); }

使用CSS clip-path

利用clip-path属性创建更复杂的齿轮形状：

.gear {
  width: 100px;
  height: 100px;
  background-color: #333;
  clip-path: polygon(
    50% 0%, 60% 20%, 80% 20%, 70% 40%,
    80% 60%, 60% 60%, 50% 80%, 40% 60%,
    20% 60%, 30% 40%, 20% 20%, 40% 20%
  );
}

添加动画效果

让齿轮旋转起来：

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

.gear {
  animation: rotate 5s linear infinite;
}

使用CSS变量控制齿轮

通过CSS变量使齿轮更易于定制：

.gear {
  --size: 100px;
  --color: #333;
  --teeth: 8;
  --teeth-width: calc(var(--size) * 0.2);
  --teeth-height: calc(var(--size) * 0.4);

  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  border-radius: 50%;
  position: relative;
}

这些方法可以根据需要组合使用，创建不同样式和复杂度的齿轮效果。

css制作齿轮