如何使用純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>