html - 动画 z-index

Question

我有这个页面，想把它应用到它上面。

.contact {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid red;
  position: relative;
  top: 0;
  margin-left: 0;
  transform: rotate(90deg);
  float: right;
}

.contact:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

.contact {
  animation: fish 4s linear infinite;
}

@keyframes fish {
  0% {
    right: 0px;
    top: 0px;
  }
  25% {
    right: 200px;
    top: 0px;
  }
  50% {
    right: 200px;
    top: 200px;
  }
  75% {
    right: 0px;
    top: 200px;
  }
  100% {
    right: 0px;
    top: 0px;
  }
}

.box {height: 50px; width 100px; background-color: black; margin: auto; transform: rotate(90deg);} 

<div class="contact"></div>
<div class="box"></div>

问题是页面上的各种其他元素具有不同的 z-index，我想将其发送到一些元素的后面和其他元素的前面。我可以为 z-index 设置动画吗？例如，动画 z-index 1 中的 5s 将适用，z-index 3 中的 10s 将适用。

标签： htmlcss

Answer 1

是的。它完全按照您的预期完成。只需像这样添加z-index到您的动画关键帧中：

.contact {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid red;
  position: relative;
  top: 0;
  margin-left: 0;
  transform: rotate(90deg);
  float: right;
}

.contact:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

.contact {
  animation: fish 4s linear infinite;
}

@keyframes fish {
  0% {
    right: 0px;
    top: 0px;
  }
  25% {
    right: 200px;
    top: 0px;
  }
  50% {
    right: 200px;
    top: 200px;
    z-index:100;
  }
  75% {
    right: 0px;
    top: 200px;
  }
  100% {
    right: 0px;
    top: 0px;
  }
}

.box {height: 50px; width 100px; background-color: black; margin: auto; transform: rotate(90deg);}

<div class="contact"></div>
<div class="box"></div>