使用css制作齿轮

2026-03-12 08:30:32CSS

使用CSS制作齿轮效果

通过CSS的border-radius、transform和伪元素可以实现齿轮效果。以下是具体实现方法：

HTML结构

<div class="gear"></div>

CSS样式

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

.gear::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 30px;
  background: #555;
  top: 35px;
  left: -20px;
  border-radius: 5px;
}

.gear::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 140px;
  background: #555;
  top: -20px;
  left: 35px;
  border-radius: 5px;
}

添加齿轮齿效果

通过多个伪元素或box-shadow可以创建更精细的齿轮齿：

.gear {
  width: 100px;
  height: 100px;
  background: #555;
  border-radius: 50%;
  position: relative;
  box-shadow: 
    0 0 0 10px #555,
    0 0 0 20px #555,
    0 0 0 30px #555;
}

制作旋转动画

使用CSS动画让齿轮转动：

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

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

多层齿轮组合

创建相互啮合的多个齿轮：

使用css制作齿轮

<div class="gear-container">
  <div class="gear gear-large"></div>
  <div class="gear gear-small"></div>
</div>

.gear-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.gear-large {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 0;
  top: 0;
}

.gear-small {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 120px;
  top: 50px;
  animation: rotate 3s linear infinite reverse;
}

以上方法通过纯CSS实现了基本的齿轮效果，可根据需要调整尺寸、颜色和动画参数。