Question

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

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

我想绘制一个fidget旋转器需要4个div个圆圈和3个div矩形来将中心圆连接到其他三个和一个包装器div（将animate属性应用于此div ）。但是这个定位搞得一团糟。

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

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>

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

1 个答案: