如何使用纯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 （将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>