如何使用纯 CSS 绘制微调器？

Question

我首先尝试通过两个三角形来实现它。并得到了满意的输出

#wrapper {
  margin-left: 40vw;
  margin-top: 20vh;
}

#fidgetu {
  width: 0;
  height: 0;
  position: absolute;
  margin-top: 3vh;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  animation: rotate 2s linear infinite;
}

#fidgetd {
  width: 0;
  height: 0;
  position: absolute;
  margin-top: 3vh;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  animation: rotate 2s linear infinite;
}

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

<div id="wrapper">
  <div id="fidgetu">
  </div>
  <div id="fidgetd">
  </div>
</div>

我猜想绘制一个指尖陀螺需要 4 个 div 圆圈和 3 个 div 矩形来将中心圆圈连接到其他三个圆圈以及一个包装器 div（对这个 div 应用 animate 属性）。但是定位很乱。

现在我如何适当地定位它们以使整个块围绕其中心旋转？

Answer 1

将一个元素设置为基本微调器，然后将该元素的 3 个子元素设置为外圈。

如果外部元素位于第一个之上，则只需旋转基本元素即可处理其他元素的旋转。

有点棘手的是连接内部和外部的曲线。我已经设置了一个解决方案，但存在一些偏差。它仍然需要对像素值进行最后一次调整（但很难准确得到）

.spinner, .outer {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  transform-style: preserve-3d;
}

.spinner {
  background-color: teal;
  border: solid 20px tomato;
  margin: 100px;
  animation: rotate 4s infinite linear;
}

.outer {
  background-color: lightblue;
  border: solid 20px blue;
  left: -20px;
  top: -20px;
}

.outer:before {
   content: "";
   position: absolute;
   width: 150px;
   height: 150px;
   border-radius: 50%;
   transform: translate(-91px, 104px);
   box-shadow: 0px -55px 0px -33px blue;
}

.outer:after {
   content: "";
   position: absolute;
   width: 150px;
   height: 150px;
   border-radius: 50%;
   transform: translate(-83px, -156px);
   box-shadow: 0px 55px 0px -33px blue;
}


.outer:nth-child(1) {
   transform: translate3D(120px, 0px, -10px);
}

.outer:nth-child(2) {
   transform: rotate(120deg) translate3D(120px, 0px, -10px);
}

.outer:nth-child(3) {
   transform: rotate(240deg) translate3D(120px, 0px, -10px);
}

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

<div class="spinner">
    <div class="outer"></div>
    <div class="outer"></div>
    <div class="outer"></div>
</div>