CSS Z-Index für Shadow nur - html, css3, css-Übergänge

Ich versuche, meinen Schatten, der während der Hover-Übergänge meines runden Knopfes erzeugt wurde, mit einem div (roten) zu überlappen, so dass der Pusle-Effekt nicht auf meinem div, sondern an anderen Stellen zu sehen ist.
Hier ist mein Code:

body {
background: #292f33;
text-align: center;
color: #FFF;
font-family: sans-serif;
}
.btntest {
width: 190px;
padding: 4px;
border-radius: 5px;
background: red;
color: white;
z-index: 299;
position: fixed;
}
.button {
position: fixed;
z-index: 300;
left: 10px;
display: inline-block;
height: 60px;
width: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
}
.button:hover {
animation: pulse 1.1s ease-out;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
25% {
z-index: 298;
box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
}
49.9% {
z-index: 298;
box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
}
50% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
75% {
z-index: 298;
box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
}
99.9% {
z-index: 298;
box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
}
100% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
}
@-webkit-keyframes pulse {
0% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
25% {
z-index: 298;
box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
}
49.9% {
z-index: 298;
box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
}
50% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
75% {
z-index: 298;
box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
}
99.9% {
z-index: 298;
box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
}
100% {
z-index: 298;
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
}
<p>Pulse Effect</p>
<a class="button"></a>
<div class="btntest">Test</div>

Ich habe eine Z-Index-Eigenschaft für die Übergangsschatten angegeben, aber jedes Mal, wenn ich den Mauszeiger halte, verbirgt sich die Schaltfläche auch unterhalb des div - und ich möchte nur, dass sich der Schatten versteckt. Wie kann ich das erreichen?

Antworten:

1 für die Antwort № 1

Wie @connexo sagte, ist der Schatten eines Elements immer gleich z-index Ebene seines Elements.
Eine mögliche Problemumgehung besteht darin, ein anderes zu erstellen versteckt Element, das auf einer unteren Ebene steht, animiert wird, während Sie den echten Knopf schweben:

body {
background: #292f33;
text-align: center;
color: #FFF;
font-family: sans-serif;
}
.btntest {
width: 190px;
padding: 4px;
border-radius: 5px;
background: red;
color: white;
z-index: 299;
position: fixed;
}
.button {
position: fixed;
z-index: 300;
left: 10px;
display: inline-block;
height: 60px;
width: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
}
.fake-btn {
position: fixed;
z-index: 298;
left: 10px;
display: inline-block;
height: 60px;
width: 60px;
border-radius: 50%;
margin: 0;
background: rgba(255, 255, 255, 0);
}
.button:hover + .fake-btn {
animation: pulse 1.1s ease-out;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
25% {
box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
}
49.9% {
box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
}
50% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
75% {
box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
}
99.9% {
box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
}
@-webkit-keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
25% {
box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);
}
49.9% {
box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);
}
50% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
75% {
box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);
}
99.9% {
box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);
}
}
<p>Pulse Effect</p>

<a class="button"></a>
<p class="fake-btn"></p>
<div class="btntest">Test</div>


0 für die Antwort № 2

Du kannst es nicht so machen. Der Schatten eines Elements wird immer auf derselben Z-Index-Ebene wie das Element mit dem Schatten gestapelt.


Speisekarte