使用 CSS 圍繞圓圈旋轉對象？

Question

我試圖讓三個物體繞一個圓圈旋轉。 到目前為止，我已經能夠讓一個 object 繞着圓圈旋轉。 如果不弄亂代碼，我無法獲得多個。 誰能建議實現這一目標的最佳方法？ 這是代碼的一部分和小提琴。 謝謝！

這是演示

 .outCircle { width: 200px; height: 200px; background-color: lightblue; left: 270px; position: absolute; top: 50px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }.rotate { width: 100%; height: 100%; -webkit-animation: circle 10s infinite linear; }.counterrotate { width: 50px; height: 50px; -webkit-animation: ccircle 10s infinite linear; }.inner { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 100px; position: absolute; left: 0px; top: 0px; background-color: red; display: block; } @-webkit-keyframes circle { from { -webkit-transform: rotateZ(0deg) } to { -webkit-transform: rotateZ(360deg) } } @-webkit-keyframes ccircle { from { -webkit-transform: rotateZ(360deg) } to { -webkit-transform: rotateZ(0deg) } }

 <div class="outCircle"> <div class="rotate"> <div class="counterrotate"> <div class="inner">hello </div> </div> </div> </div>

Answer 1

Jquery 解決方案適用於任意數量的外部項目。

Jquery 無恥地從ThiefMaster ♦ 中竊取了他們在此問答中的回答

 var radius = 100; // adjust to move out items in and out var fields = $('.item'), container = $('#container'), width = container.width(), height = container.height(); var angle = 0, step = (2 * Math.PI) / fields.length; fields.each(function() { var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2); var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2); if (window.console) { console.log($(this).text(), x, y); } $(this).css({ left: x + 'px', top: y + 'px' }); angle += step; });

 body { padding: 2em; } #container { width: 200px; height: 200px; margin: 10px auto; border: 1px solid #000; position: relative; border-radius: 50%; animation: spin 10s linear infinite; } .item { width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; position: absolute; background: #f00; animation: spin 10s linear infinite reverse; } @keyframes spin { 100% { transform: rotate(1turn); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>

Answer 2

這個怎么樣，底部有3個圓圈的演示：

 .outCircle { width: 200px; height: 200px; background-color: lightblue; left: 270px; position: absolute; top: 50px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } .duringTwentyOne { -webkit-animation-duration: 21s; } .duringTen { -webkit-animation-duration: 10s; } .duringFour { -webkit-animation-duration: 4s; } .infinite { -webkit-animation-iteration-count: infinite; } .linear { -webkit-animation-timing-function: linear; } .counter { width: 50px; height: 50px; -webkit-animation-duration: inherit; -webkit-animation-direction: reverse; -webkit-animation-timing-function: inherit; -webkit-animation-iteration-count: inherit; -webkit-animation-name: inherit; } .rotate { width: 100%; height: 100%; -webkit-animation-name: circle; position: relative; z-index : 10; display : block; } .second { top : -100%; } .thirdBigger { top : -240%; left: -40%; width:150%; height: 150%; } .inner { width: 100px; height: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 100px; position: absolute; left: 0px; top: 0px; background-color: red; display: block; } .red { background: red; } .green { background: green; } @keyframes circle { from {-webkit-transform: rotateZ(0deg)} to {-webkit-transform: rotateZ(360deg)} }

 <div class="outCircle"> <div class="rotate linear infinite duringTen"> <div class="counter"> <div class="inner">hello </div> </div> </div> <div class="second rotate linear infinite duringFour"> <div class="counter"> <div class="inner red">bye bye </div> </div> </div> <div class="thirdBigger rotate linear infinite duringTwentyOne"> <div class="counter"> <div class="inner green">s'up </div> </div> </div> </div>

Answer 3

不確定這是否是您所追求的，但是您需要絕對定位您的旋轉圓圈（這樣它們就不會相互干擾），然后給它們自己的動畫：

對於反向旋轉，只需將它們減去旋轉度數即可使您的文本保持水平

 .outCircle { width: 200px; height: 200px; background-color: lightblue; left: 270px; position: absolute; top: 50px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } .rotate { width: 100%; height: 100%; position: absolute; /* add this */ } .counterrotate { width: 100px; height: 100px; } .inner { width: 100px; height: 100px; text-align: center; vertical-align: middle; background: red; border-radius: 100px; background-color: red; display: table-cell; } .anim1 { -webkit-animation: circle1 10s infinite linear; } .anim1 .counterrotate { -webkit-animation: ccircle1 10s infinite linear; } .anim2 { -webkit-animation: circle2 10s infinite linear; } .anim2 .counterrotate { -webkit-animation: ccircle2 10s infinite linear; } .anim3 { -webkit-animation: circle3 10s infinite linear; } .anim3 .counterrotate { -webkit-animation: ccircle3 10s infinite linear; } @-webkit-keyframes circle1 { from { -webkit-transform: rotateZ(0deg) } to { -webkit-transform: rotateZ(360deg) } } @-webkit-keyframes ccircle1 { from { -webkit-transform: rotateZ(0deg) } to { -webkit-transform: rotateZ(-360deg) } } @-webkit-keyframes circle2 { from { -webkit-transform: rotateZ(90deg) } to { -webkit-transform: rotateZ(450deg) } } @-webkit-keyframes ccircle2 { from { -webkit-transform: rotateZ(-90deg) } to { -webkit-transform: rotateZ(-450deg) } } @-webkit-keyframes circle3 { from { -webkit-transform: rotateZ(180deg) } to { -webkit-transform: rotateZ(540deg) } } @-webkit-keyframes ccircle3 { from { -webkit-transform: rotateZ(-180deg) } to { -webkit-transform: rotateZ(-540deg) } }

 <div class="outCircle"> <div class="rotate anim1"> <div class="counterrotate"> <div class="inner">hello </div> </div> </div> <div class="rotate anim2"> <div class="counterrotate"> <div class="inner">hello </div> </div> </div> <div class="rotate anim3"> <div class="counterrotate"> <div class="inner">hello </div> </div> </div> </div>

Answer 4

這是一個更通用的想法，其中不需要 JS 的地方更少，您只需要將動畫應用於項目（而不是容器）。 訣竅是讓所有元素都在相同的位置並使用相同的動畫然后延遲我們可以獲得所需的結果：

 #container { width: 200px; height: 200px; margin: 40px auto; border: 1px solid #000; display:grid; grid-template-columns:30px; grid-template-rows:30px; place-content: center; border-radius: 50%; } .item { grid-area:1/1; line-height: 30px; text-align: center; border-radius: 50%; background: #f00; animation: spin 12s var(--d,0s) linear infinite; /* duration = 12s, numbor of item = 6 so a delay of 12/6 = 2s */ transform:rotate(0) translate(100px) rotate(0); } @keyframes spin { 100% { transform:rotate(1turn) translate(100px) rotate(-1turn); } }

 <div id="container"> <div class="item" style="--d:0s">1</div> <div class="item" style="--d:-2s">2</div> <div class="item" style="--d:-4s">3</div> <div class="item" style="--d:-6s">4</div> <div class="item" style="--d:-8s">5</div> <div class="item" style="--d:-10s">6</div> </div>

我們可以使用一些 CSS 變量輕松地縮放到任意數字：

 #container { --n:7; /* number of item */ --d:12s; /* duration */ width: 200px; height: 200px; margin: 40px auto; border: 1px solid #000; display:grid; grid-template-columns:30px; grid-template-rows:30px; place-content: center; border-radius: 50%; } .item { grid-area:1/1; line-height: 30px; text-align: center; border-radius: 50%; background: #f00; animation: spin var(--d) linear infinite; transform:rotate(0) translate(100px) rotate(0); } @keyframes spin { 100% { transform:rotate(1turn) translate(100px) rotate(-1turn); } } .item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))} .item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))} .item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))} .item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))} .item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))} .item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))} .item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))} .item:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n))} .item:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n))} /*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/

 <div id="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> </div> <div id="container" style="--n:5;--d:5s"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> <div id="container" style="--n:9"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>

Answer 5

使用translateX 。

看到這個jsfiddle。

我制作了外圈position: relative和內圈position: absolute ，所以它們位於彼此中間的頂部（這只是為了說明，這只是為了將子圈定位在同一位置；將它們分組）。

然后，從這個中心點， translateX告訴動畫給它一個半徑，在這種情況下是 100px（這是外圓的半徑）。 你去吧。

Answer 6

 .circleLink { color: #ececec; text-transform: uppercase; font-size: 24px; line-height: 120%; position: relative; display: inline-block; border: 1px solid blue; width: 200px; height: 200px; -moz-box-flex: 0; flex: 0 0 270px; display: -moz-box; display: flex; -moz-box-pack: center; justify-content: center; -moz-box-align: center; align-items: center; border-radius: 50%; }.round>span:first-child { position: relative; color:blue; }.round>span:first-child::before { content: ""; position: absolute; width: 100%; height: 0; border: 1px solid #ececec; bottom: -5px; background: #ececec; border-radius: 10px; left: 0; }.round>span:nth-child(2) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); }.circleLink>span:nth-child(2) { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; }.circleLink>span:nth-child(2) span { position: absolute; top: -webkit-calc(50% - 0.5px); top: -moz-calc(50% -.5px); top: calc(50% - 0.5px); left: 50%; z-index: 1; width: 50%; height: 1px; -webkit-transform-origin: left; -moz-transform-origin: left; transform-origin: left; -webkit-animation: linkRotate 5s linear 0s infinite; -moz-animation: linkRotate 5s linear 0s infinite; animation: linkRotate 5s linear 0s infinite; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; }.circleLink>span:nth-child(2) span:before { content: ""; position: absolute; width: 20px; height: 20px; top: -10px; right: -10px; background: #42B4EF; border-radius: 50%; }.circleLink:hover>span:nth-child(2) span { -webkit-animation-play-state: running; -moz-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes linkRotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @-moz-keyframes linkRotate { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg) } to { -moz-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes linkRotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); transform: rotate(1turn) } }

 <div class="round"> <a href="#" class="circleLink"> <span>Loram</span> <span><span></span></span> </a> </div>