我有一个空白区域,在该空白区域后方悬挂着一个灰色的“标签”。我有动画使整个事情从视线中消失。

出于某种原因,在动画持续时间(2s)中,“选项卡”显示在空白区域的前面,直到关键帧过渡停止并且z-index适当地将选项卡放置在空白区域的后面。

我正在寻找一种在整个过渡过程中在空白后面显示选项卡的方式(通过动画实现适当的z索引)。



.form{
  position: relative;
  top: 70px;
  width: 60%;
  height: 82%;
  padding: 10px 20px;
  background: #f4f7f8;
  margin: 10px auto;
  border-radius: 8px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#form-Animation{
  animation: slide 2s 1;
}
@keyframes slide{
  0%{
    transform: translate3d(0px, 500%, 0px);
  }
  100%{
    transform: translate3d(0px, 0%, 0px);
  }
}
.formHat{
  height: 30px;
  position: absolute;
  top: -33px;
  left: 0px;
  color: white;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 110%;
  background-color: #8c8c8c;
  padding: 6px;
  border-radius: 8px 8px 0px 0px;
  z-index: -10;
  display: block;
}

<div class="form" id="form-Animation">
  <div class="formHat" id="formHat">This is the tab!
  </div>
  </div>

最佳答案

因为您除了formHat以外,它在表单内部移动了z-index: -10并为其提供了背景,因此您必须在表单内部创建一个新的div

这是一个工作示例进行测试并告诉我



        .form{
          width: 60%;
          height: 82%;
          position: relative;
            margin-top: 40px;

        }
        .form_front{
          top: 70px;
          padding: 10px 20px;
          background: #f4f7f8;
          margin: 10px auto;
          border-radius: 8px;
          font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
        }
        #form-Animation{
          animation: slide 2s 1;
        }
        @keyframes slide{
          0%{
            transform: translate3d(0px, 500%, 0px);
          }
          100%{
            transform: translate3d(0px, 0%, 0px);
          }
        }
        .formHat{
          height: 30px;
          position: absolute;
          top: -33px;
          left: 0px;
          color: white;
          font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
          font-size: 110%;
          background-color: #8c8c8c;
          padding: 6px;
          border-radius: 8px 8px 0px 0px;
          z-index: -10;
          display: block;
        }

    <!DOCTYPE html>
    <html>
    <body>
    <div class="form" id="form-Animation">
    <div class="form_front"></div>
      <div class="formHat" id="formHat">This is the tab!</div>
      </div>
    </body>
    </html>

07-24 09:45
查看更多