CSS梯形齿轮动画与心率线条调整技术咨询

嘿，我来帮你搞定这两个痛点！咱们先把齿轮的齿改成梯形，再调整心率线条让它贴合真实Logo的样式，直接上修改后的完整代码，再给你拆解改动细节：

修改后的完整代码 #

.parent { 
  position: relative; 
  transform: scale(0.4); 
}

.gear { 
  position: relative; 
  width: 200px; 
  height: 200px; 
  margin: auto; 
  background: black; 
  border-radius: 50%; 
  animation-name: spin; 
  animation-duration: 4s; 
  animation-iteration-count: infinite; 
  animation-timing-function: linear; 
}

.gear .center { 
  position: absolute; 
  top: 25px; 
  left: 25px; 
  z-index: 10; 
  width: 150px; 
  height: 150px; 
  background: #fff; 
  border-radius: 50%; 
}

/* 改成梯形齿的核心代码 */
.tooth { 
  position: absolute; 
  top: -25px; 
  left: 72.5px; 
  z-index: 1; 
  width: 55px; 
  height: 250px; 
  background: black;
  /* 用clip-path定义梯形形状，这里是上窄下宽，可根据你的Logo调整百分比 */
  clip-path: polygon(25% 0, 75% 0, 100% 100%, 0% 100%);
}

.tooth:nth-child(2) { transform: rotate(45deg); }
.tooth:nth-child(3) { transform: rotate(90deg); }
.tooth:nth-child(4) { transform: rotate(135deg); }

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

/* 替换为心率波动线条（贴合真实Logo样式） */
#heart-rate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 120px;
  height: 40px;
}

#heart-rate::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 50%, #1D74BA 50%);
  background-size: 20px 40px;
  background-position: 0 0;
  animation: heart-beat 1s linear infinite;
}

@keyframes heart-beat {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

关键改动说明 #

1. 齿轮梯形齿实现 #

• 用clip-path: polygon(25% 0, 75% 0, 100% 100%, 0% 100%)定义梯形：这个多边形坐标会让齿的顶部宽度是自身的50%（25%到75%），底部是100%宽度，刚好形成上窄下宽的梯形。如果你的Logo是上宽下窄，只需要把坐标改成polygon(0% 0, 100% 0, 75% 100%, 25% 100%)就行。
• 微调了.tooth的left和width：因为梯形的顶部宽度变窄，所以调整位置让齿刚好对齐齿轮的边缘，避免偏移。

2. 心率线条调整 #

• 替换了原来未完成的心形代码，改成了模拟心率波动的线条效果：用线性渐变加背景位置动画，实现类似心电图的跳动效果。
• 你可以根据真实Logo的颜色、波动频率调整#1D74BA（颜色）、animation-duration（跳动速度）、background-size（波动间距）这些参数，完全匹配你的需求。

如果你的真实心率线条是其他样式（比如实心曲线），可以告诉我具体形态，我再帮你调整！

内容的提问来源于stack exchange，提问作者Krystian