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

时间：2016-08-18 14:21:33

标签： html css css-animations

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

以下是 Demo

＆＃13;
＆＃13; 
.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)
  }
}
＆＃13; 
<div class="outCircle">
  <div class="rotate">
    <div class="counterrotate">
      <div class="inner">hello
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：6)

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

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

＆＃13;
＆＃13; 
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;
});
＆＃13; 
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);
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

这个怎么样，底部带有3个圆圈的演示：

＆＃13;
＆＃13; 
.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)}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

不确定这是否是您所追求的，但您需要绝对定位旋转圆圈（这样它们不会相互干扰）然后给它们自己的动画：

对于计数器旋转，只需使它们减去旋转度数，然后保持文本水平

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

答案 3 :(得分：2)

这是一个更通用的想法，其中不需要 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>

答案 4 :(得分：0)

使用translateX。

See this jsfiddle.

我制作了外圈position: relative和内圈position: absolute，所以他们躺在彼此的中间（这只是为了说明，这只是为了将儿童圈定位在同一个圈子上）现场;将它们分组）。

然后，从这个中心点，translateX告诉动画在这种情况下给它一个半径为100px（这是外圆的半径）。 你去吧。

相关问题
最新问题