我有一个空白区域,在该空白区域后方悬挂着一个灰色的“标签”。我有动画使整个事情从视线中消失。
出于某种原因,在动画持续时间(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>