围绕中心点在圆形路径中移动元素

Question

我试图让页面上的多个对象像圆圈一样围绕中心移动。我发现 codepen 与我想要的非常相似，但是我无法复制作者使用的方法。方法是：

  @return $pl-year-in-days * $year-in-second / 365.2563 + s  //Earth reference
}

实现这一目标的最佳方法是什么？我做了一个 codesandbox 来澄清我的意思。 （东西应该围绕中心环运行）

预先感谢您的帮助

Answer 1

该问题询问如何以最佳方式将对象沿圆形移动。我当然不能说这是否是最好的，但一个简单的方法，只需要 CSS/HTML 是有一个以所需中心为中心的 div，将对象放在左边并旋转整个元素。

这里是一个例子，当然，在真实的东西中边框会被移除。

这是一个包含两个旋转对象的片段 - 使用 CSS 变量，因此它们可以相对于彼此调整大小（就像您可能对行星所做的那样，地球通常具有单位尺寸）。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
}

.middle {
  position: absolute;
  --radius: 10vmin;
  top: calc(50% - var(--radius));
  left: calc(50% - var(--radius));
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  background-color: gold;
  border-radius: 50%;
  border-style: none;
}

.obj1 {
  --time: 0.5;
  --dist: 0.6;
  --size: 0.4;
}

.obj2 {
  --time: 1;
  --dist: 1;
  --size: 1;
}

.obj {

  --timeunit: 10s;
  --offsetunit: 30vmin;
  --sizeunit: 5vmin;

  position: absolute;
  top: calc(50% - calc(var(--size) * var(--sizeunit)));
  --offset: calc(var(--dist) * var(--offsetunit));/* distance from the center */
  left: calc(50% - var(--offset)); 
  width: calc(2 * var(--offset));
  animation: circleRound calc(var(--time) * var(--timeunit)) linear infinite;
}

.obj .inner {
  position: absolute;
  position: relative;
  width: calc(calc(2 * var(--size)) * var(--sizeunit));
  height: calc(calc(2 * var(--size)) * var(--sizeunit)); 
  border-radius: 50%;
  border-style: none;
  background-color: blue;
}

@keyframes circleRound {
  100% {
    transform: rotate(360deg);
  }
}

<div class="middle"></div>
<div class="obj obj1"><a href="#"><div class="inner"></div></a></div>
<div class="obj obj2"><a href="#"><div class="inner"></div></a></div>

这个问题也问这个

  @return $pl-year-in-days * $year-in-second / 365.2563 + s  //Earth reference

这只是一个计算，返回一个行星“年”中的秒数。 （旋转即动画持续时间将与此成正比）。对于地球，年中天数是 365.2563，因此您可以在几秒钟内返回（地球）年。维基百科有关于每颗行星绕太阳旋转的相对时间的很好的信息。