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

我似乎已经通过将负数var postParameters = new CredoPayRequest() { amount = amount, birthDate = Dob, currency = "GEL", currencyRate = 1, accountId = credoPayId, fee = 0, paymentDate = trx_date, personalNumber = personalNumber, terminalId = terminalId.ToString(), transactionId = invoiceID };添加到应用于父级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?）从而改变{{1 }}没用

即使您从父级移除z-index，您仍然可以通过转换来创建堆栈上下文，从而使子元素无法向后移动，因此您也无法使z-index向后移动.moon。

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

添加一些颜色以更好地查看此内容：

.earth

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

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>

遮盖对象以使其看起来好像它在旋转的项目后面

3 个答案: