当前位置：首页 > CSS

css制作齿轮

2026-02-27 06:05:10CSS

使用CSS制作齿轮效果

通过CSS的伪元素和变换属性可以创建齿轮形状。以下是实现方法：

css制作齿轮

基础齿轮结构

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

添加齿轮齿

.gear::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 25px;
  width: 50px;
  height: 30px;
  background-color: #333;
  border-radius: 5px;
}

.gear::after {
  content: "";
  position: absolute;
  top: 25px;
  left: -15px;
  width: 30px;
  height: 50px;
  background-color: #333;
  border-radius: 5px;
}

创建多个齿轮齿

使用旋转变换创建均匀分布的齿轮齿：

css制作齿轮

.gear {
  /* 基础样式 */
  width: 100px;
  height: 100px;
  background-color: #333;
  border-radius: 50%;
  position: relative;
}

.gear::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 20px;
  background-color: #333;
  top: -10px;
  left: 30px;
  box-shadow: 
    0 70px 0 #333,
    70px 0 0 #333,
    0 -70px 0 #333,
    -70px 0 0 #333,
    50px 50px 0 #333,
    -50px 50px 0 #333,
    50px -50px 0 #333,
    -50px -50px 0 #333;
}

添加中心孔

.gear::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  top: 35px;
  left: 35px;
}

动画效果

让齿轮旋转：

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

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

更复杂的齿轮

使用box-shadow创建更多齿：

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

.complex-gear::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 30px;
  background: #555;
  top: -15px;
  left: 45px;
  border-radius: 5px;
  box-shadow: 
    0 120px 0 #555,
    120px 0 0 #555,
    0 -120px 0 #555,
    -120px 0 0 #555,
    85px 85px 0 #555,
    -85px 85px 0 #555,
    85px -85px 0 #555,
    -85px -85px 0 #555;
}

这些CSS技术可以组合使用来创建各种齿轮效果，通过调整尺寸、颜色和阴影位置可以改变齿轮的外观。