我正在努力实现以下目标:
1.在悬停时用指定的颜色从下到上填充一张卡片(这个方法有效)。
1.仍然悬停在卡片上,我想显示一个火箭发射动画。
我遇到的问题是.rocket::before
元素不想显示在.rocket
元素后面。
我有以下代码:
.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>
我做错了什么?
1条答案
按热度按时间xj3cbfub1#
我不知道我是否能准确地解释为什么你的方法不起作用,部分原因是我甚至不确定我自己是否完全理解它。但长话短说,我认为这与CSS的“transform”属性有关,它创建了一个新的堆栈上下文,它与伪元素进行了奇怪的交互,这些伪元素也创建了自己的堆栈上下文。
但是,有一种更好的方法,使用
translateZ()
和preserve-3d
。具体来说,不是管理伪元素上的z索引,而是使用transform: translateZ(-1px);
将它们放在父元素后面。然后,要使其工作,您所要做的就是将transform-style: preserve-3d;
应用于.rocket
选择器。这适用于所有现代浏览器。下面是完整的代码: