css制作齿轮

CSS制作齿轮的方法

通过CSS的transform和border属性可以创建齿轮效果，以下是两种常见实现方式：

使用伪元素创建齿轮齿

通过::before和::after伪元素生成齿轮的齿状结构，配合旋转实现对称效果：

.gear {
  width: 100px;
  height: 100px;
  background: #3498db;
  border-radius: 50%;
  position: relative;
}
.gear::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background: inherit;
  top: -20px;
  left: 40px;
  box-shadow: 
    0 100px #3498db,
    60px 80px #3498db,
    60px 0 #3498db,
    0 -60px #3498db,
    -60px -80px #3498db,
    -60px 0 #3498db,
    -60px 80px #3498db,
    60px -80px #3498db;
}

使用clip-path创建多边形齿轮

通过CSS的clip-path属性直接绘制齿轮形状：

.gear {
  width: 120px;
  height: 120px;
  background: #e74c3c;
  clip-path: polygon(
    50% 0%, 60% 30%, 90% 30%, 70% 50%,
    90% 70%, 60% 70%, 50% 100%,
    40% 70%, 10% 70%, 30% 50%,
    10% 30%, 40% 30%
  );
}

添加旋转动画

使用CSS动画让齿轮转动：

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.gear {
  animation: rotate 3s linear infinite;
}

注意事项

• 齿轮的齿数由clip-path的点数或box-shadow的数量决定
• 调整width和height可以改变齿轮大小
• 通过修改animation-duration控制旋转速度

以上方法均不需要图片素材，纯CSS实现且支持响应式调整。