时间戳

首页 > 解决方案 > 遮盖一个对象，使它看起来好像它在它正在旋转的项目后面

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

问题描述

我正在尝试围绕另一个物体（圆圈）制作一个“点”轨道，但由于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>

标签： htmlcsscss-animations

解决方案

我似乎已经通过在z-index应用于父级的动画中添加负数来解决这个问题.orbit

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

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

推荐阅读