gpt4 book ai didi

css - 如何在动画期间修复按钮的堆叠/z-index?

转载 作者:行者123 更新时间:2023-11-27 23:38:35 27 4
gpt4 key购买 nike

我有形状像箭头的并排按钮。为了实现这一点,我使用了::before 和::after 伪元素来创建旋转的正方形。它们看起来很棒,直到我尝试为按钮设置动画。问题是向右的箭头 (::after) 的尖端必须与白色方 block 重叠,从而在下一个箭头的左边缘后面创建负/空白区域。我通过制作::after square z-index:1 来做到这一点,它工作正常。但是,当我尝试对动画中的按钮应用变换时,它会破坏::before 和::after 伪元素的堆叠上下文。

我创建了一个 fiddle 来演示:https://jsfiddle.net/twnrov23/

<button type="button" class="btn btn-info btn-arrow-right" >1. Step 1</button>
<button type="button" id="button2" class="btn btn-info btn-arrow-right" >2. Step 2</button>
<button type="button" class="btn btn-info btn-arrow-right" >3. Step 3</button>
/* ANIMATION */
.wiggle{
animation: wiggle 2s linear 1;
}
@keyframes wiggle {
0%, 7% {
transform: rotateZ(0);

}

15% {
transform: rotateZ(-15deg);

}

20% {
transform: rotateZ(10deg);

}

25% {
transform: rotateZ(-10deg);

}

30% {
transform: rotateZ(6deg);

}

35% {
transform: rotateZ(-4deg);

}

40%, 100% {
transform: rotateZ(0);

}
}
/* ARROW BUTTONS */

.btn {
line-height: 1.25;
}
.btn-arrow-right,
.btn-arrow-left {
position: relative;
padding-left: 18px;
padding-right: 18px;
}

.btn-arrow-right {
padding-left: 36px;
}

.btn-arrow-left {
padding-right: 36px;
}

.btn-arrow-right::before,
.btn-arrow-right::after,
.btn-arrow-left::before,
.btn-arrow-left::after { /* make two squares (before and after), looking similar to the button */
display: inline-block;
content: "";
position: absolute;
top: 5px; /* move it down because of rounded corners */
width: 22px; /* same as height */
height: 22px; /* button_outer_height / sqrt(2) */
background: inherit; /* use parent background */
border: inherit; /* use parent border */
border-left-color: transparent; /* hide left border */
border-bottom-color: transparent; /* hide bottom border */
border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
-webkit-border-radius: 0px 4px 0px 0px;
-moz-border-radius: 0px 4px 0px 0px;
}

.btn-arrow-right::before,
.btn-arrow-right::after {
transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

.btn-arrow-left::before,
.btn-arrow-left::after {
transform: rotate(225deg); /* rotate left arrow squares 225 deg to point left */
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
}

.btn-arrow-right::before,
.btn-arrow-left::before { /* align the "before" square to the left */
left: -11px;
}

.btn-arrow-right::after,
.btn-arrow-left::after { /* align the "after" square to the right */
right: -11px;
}

.btn-arrow-right::after,
.btn-arrow-left::before { /* bring arrow pointers to front */
z-index: 1;
}

.btn-arrow-right::before,
.btn-arrow-left::after { /* hide arrow tails background */
background-color: white;
}

当 wiggle 类应用于 #button2 时,::before 和::after 元素的 z-index 被破坏。

编辑 1:如果我将 z-index 应用到每个按钮,其中按钮 1 的 z-index 为 3,按钮 2 的 z-index 为 2,按钮 3 的 z-index 为 1,那么它就可以工作了。显然这不是一个很好的解决方案,因为它需要内联 css。

最佳答案

将此添加到您的 CSS:

.btn:nth-of-type(1) {z-index:3}
.btn:nth-of-type(2) {z-index:2}

所以它按预期工作:https://jsfiddle.net/kx5btzqn/

另一种选择是反转 HTML 中按钮的顺序并更改 direction 属性:https://jsfiddle.net/9ukrmsvc
所以你不必为每个按钮设置 z-index

关于css - 如何在动画期间修复按钮的堆叠/z-index?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57127916/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com