使用CSS在圆圈周围旋转对象？

Question

使用CSS在圆圈周围旋转对象？

我试图围绕一个圆圈旋转三个物体.到目前为止,我已经能够让一个物体围绕圆圈旋转.如果不弄乱代码,我无法获得多个.任何人都可以建议最好的方法来实现这一目标吗？这是代码和小提琴的一部分.谢谢!

这是Demo

.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)
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pau*_*e_D 9

Jquery解决方案适用于任何数量的外部项目.

Jquery从ThiefMaster♦无耻地偷走了他们在这个Q&A的回答

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Gui*_*Kiz 6

这个怎么样，底部有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)}
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Tem*_*fif 6

这是一个更通用的想法，代码较少，不需要 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);
  }
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

我们可以使用一些 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))}*/

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，3 月前
查看次数：	9312 次
最近记录：	9 年，3 月前