遮盖一个对象，使它看起来好像它在它正在旋转的项目后面

Question

我正在尝试围绕另一个物体（圆圈）制作一个“点”轨道，但由于z-index，点总是出现在圆圈上方，这意味着它是绕着轨道运行的。

CodePen 链接：https://codepen.io/moy/pen/ROVZXd?editors=1100

理想情况下，动画的第二半部分会发生在对象的后面，所以直到它从另一边出来时才能看到 - 这可能吗？

我想过淡出正在移动的对象，但我认为这不会产生平滑/蒙版效果？

对于如何屏蔽这个区域有点卡住，因为我看不到 CSS 知道它应该被隐藏的方式。我想也许我可以通过动画更改 z-index 50% 并将其重置为 0%/100% 但这似乎没有任何作用。

有什么想法吗？提前致谢！

.earth {
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  display: block;
  height: 100px;
  margin: 30px auto;
  position: relative;
  width: 100px;
  z-index: 20;
}

.orbit {
  border: 2px #eee transparent;
  border-radius: 50%;
  height: 140px;
  margin: auto;
  position: absolute;
  top: -20px;
  left: -20px;
  transform: rotateZ(60deg) rotateY(60deg);
  transform-style: preserve-3d;
  width: 140px;
  z-index: 10;
}
.orbit .moon {
  animation: move ease-in-out infinite;
  animation-duration: 2s;
  background: black;
  border-radius: 50%;
  height: 15px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 15px;
  z-index: 10;
}

@keyframes move {
  0% {
    transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); z-index: 20;
  }
  50% {
    z-index: -20;
  }
  100% {
    transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); z-index: 20;
  }
}

<div class="earth">
  <div class="orbit">
    <div class="moon"></div>
  </div>
</div>

Answer 1

我似乎通过在应用于父级.orbit 的动画中添加一个否定的z-index 解决了这个问题

链接：https://codepen.io/moy/pen/wZdpRw?editors=1100

我最初在动画中应用了 50%，因为这应该是点在它回到大圆圈后面之前的最远距离。但是，这不起作用，将其设置为 100% 确实有效。不完全确定为什么，但它似乎有效！

Answer 2

最初的问题是由于您将z-index 应用于父元素并且这样做将不可能使子元素移动到它后面（Why elements with any z-index value can never cover its child?）因此更改z-index 是无用的

p>

即使您从父元素中删除z-index，您仍然拥有创建堆叠上下文的转换，这使得子元素无法移动到后面，因此您无法使.moon 移动到.earth 后面.

这样做的唯一方法（就像您已经注意到的那样）是从 .earth 中删除 z-index 以避免地球创建堆叠上下文并动画轨道 z 索引以使轨道和月球在后面移动地球（不仅是月球）。

添加一些颜色以更好地看到这一点：

.earth {
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  display: block;
  height: 100px;
  margin: 60px auto;
  position: relative;
  width: 100px;
}

.orbit {
  animation: hide ease-in-out infinite;
  animation-duration: 2s;
  background:red;
  border-radius: 50%;
  height: 140px;
  margin: auto;
  position: absolute;
  top: -20px;
  left: -20px;
  transform: rotateZ(60deg) rotateY(60deg);
  transform-style: preserve-3d;
  width: 140px;
}

.orbit .moon {
  animation: move ease-in-out infinite;
  animation-duration: 2s;
  background: black;
  border-radius: 50%;
  height: 15px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 15px;
}

@keyframes move {
  0% {
    transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg);
  }
  100% {
    transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg);
  }
}

@keyframes hide {
  0% {
    z-index: 20;
  }
  100% {
    z-index: -20;
  }
}

<div class="earth">
  <div class="orbit">
    <div class="moon"></div>
  </div>
</div>

现在，如果您将 z-index 添加回地球，它将因为堆栈上下文而停止工作：

.earth {
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  display: block;
  height: 100px;
  margin: 60px auto;
  position: relative;
  width: 100px;
  z-index:2;
}

.orbit {
  animation: hide ease-in-out infinite;
  animation-duration: 2s;
  background:red;
  border-radius: 50%;
  height: 140px;
  margin: auto;
  position: absolute;
  top: -20px;
  left: -20px;
  transform: rotateZ(60deg) rotateY(60deg);
  transform-style: preserve-3d;
  width: 140px;
}

.orbit .moon {
  animation: move ease-in-out infinite;
  animation-duration: 2s;
  background: black;
  border-radius: 50%;
  height: 15px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 15px;
}

@keyframes move {
  0% {
    transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg);
  }
  100% {
    transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg);
  }
}

@keyframes hide {
  0% {
    z-index: 20;
  }
  100% {
    z-index: -20;
  }
}

<div class="earth">
  <div class="orbit">
    <div class="moon"></div>
  </div>
</div>

Answer 3

您可以尝试设置不透明度的关键帧：

.earth {
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  display: block;
  height: 100px;
  margin: 30px auto;
  position: relative;
  width: 100px;
  z-index: 20;
}

.orbit {
  border: 2px #eee transparent;
  border-radius: 50%;
  height: 140px;
  margin: auto;
  position: absolute;
  top: -20px;
  left: -20px;
  transform: rotateZ(60deg) rotateY(60deg);
  transform-style: preserve-3d;
  width: 140px;
  z-index: 10;
}
.orbit .moon {
  animation: move ease-in-out infinite;
  animation-duration: 2s;
  background: black;
  border-radius: 50%;
  height: 15px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 15px;
  z-index: 10;
}

@keyframes move {
  0% {
    transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); opacity: 1;
  }
  56% {
    opacity: 1;
  }
  58% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  78% {
  opacity: 1;
  }
  100% {
    transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); opacity: 1;
  }
}

<div class="earth">
  <div class="orbit">
    <div class="moon"></div>
  </div>
</div>