我正在努力實現以下目標:

懸停時，從下到上用指定的顏色填充卡片(這是有效的)。 仍然在懸停卡上，我想顯示一個火箭發射動畫。 我有個問題。rocket::before元素不希望顯示在。火箭元素。

我有以下代碼:

.main-nav-card {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    #1c7ed6 50%
  );
  background-size: 100% 200%;
  height: 70rem;
  border: 1px solid currentColor;
  padding: 4.8rem 9.6rem;
  border-radius: var(--border-radius-large);
  position: relative;
  z-index: 2;
}

.main-nav-card:hover {
  animation-name: fillCard;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fillCard {
  from {
    background-position: top;
  }

  to {
    background-position: bottom;
  }
}

.rocket {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #000;
  height: 50px;
  width: 25px;
  border-radius: 50% 50% 0 0;
  /* z-index: 20; */
}

.rocket::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -15px;

  height: 20px;
  width: 55px;
  border-radius: 50% 50% 0 0;
  background-color: #f03e3e;

  z-index: -1;
}

.rocket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -4px;

  height: 4px;
  width: 15px;
  border-radius: 0 0 2px 2px;
  background-color: #f03e3e;
  z-index: -1;
}

.main-nav-card:hover .rocket {
  display: block;
  animation-name: flyRocket;
  animation-duration: 3s;
}

@keyframes flyRocket {
  from {
    transform: translateY(1000%);
    /* z-index: 9999; */
  }

  to {
    transform: translateY(0);
    /* z-index: 9999; */
  }
}

.card-title {
  font-size: 3.2rem;
}

.window {
  height: 10px;
  width: 10px;
  background-color: var(--color-primary);
  border-radius: 50%;
  position: relative;
  top: 17px;
  left: 7.5px;
  /* transform: translateX(25%); */
}

<div class="main-nav-card">
  <p class="card-title">Introduction</p>

  <div class="rocket">
    <div class="window"></div>
  </div>
</div>

我相信這個問題是由于CSS & quot轉換& quot屬性在rocket中創建新的堆疊上下文，這可以防止子元素和偽元素出現在堆疊上下文根(。火箭)。因此，修復方法是將您的。rocket元素，而是在包裝器上應用轉換。這樣，堆疊上下文是在包裝器上創建的，而不是直接在rocket上創建的，從而使任何子元素和偽元素再次出現在它的后面。

但是，有一個更好的方法，使用translateZ()和preserve-3d。具體來說，不要在偽元素上管理z索引，而是使用transform:translate z(-1px)；將它們放在父元素的后面。然后，你要做的就是應用transform-style:preserve-3d；到。火箭選擇器。這適用于所有最現代的瀏覽器。以下是完整的代碼:

.main-nav-card {
  background: linear-gradient(to bottom, transparent 50%, #1c7ed6 50%);
  background-size: 100% 200%;
  height: 70rem;
  border: 1px solid currentColor;
  padding: 4.8rem 9.6rem;
  border-radius: var(--border-radius-large);
  position: relative;
  z-index: 2;
}

.main-nav-card:hover {
  animation-name: fillCard;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fillCard {
  from {
    background-position: top;
  }
  to {
    background-position: bottom;
  }
}

.rocket {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #000;
  height: 50px;
  width: 25px;
  border-radius: 50% 50% 0 0;
  transform-style: preserve-3d;
}

.rocket::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -15px;
  height: 20px;
  width: 55px;
  border-radius: 50% 50% 0 0;
  background-color: #f03e3e;
  transform: translateZ(-1px);
}

.rocket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -4px;
  height: 4px;
  width: 15px;
  border-radius: 0 0 2px 2px;
  background-color: #f03e3e;
  transform: translateZ(-1px);
}

.main-nav-card:hover .rocket {
  display: block;
  animation-name: flyRocket;
  animation-duration: 3s;
}

@keyframes flyRocket {
  from {
    transform: translateY(1000%);
  }
  to {
    transform: translateY(0);
  }
}

.card-title {
  font-size: 3.2rem;
}

.window {
  height: 10px;
  width: 10px;
  background-color: var(--color-primary);
  border-radius: 50%;
  position: relative;
  top: 17px;
  left: 7.5px;
  /* transform: translateX(25%); */
}

<div class="main-nav-card">
  <p class="card-title">Introduction</p>

  <div class="rocket">
    <div class="window"></div>
  </div>
</div>