केवल छाया के लिए सीएसएस जेड-इंडेक्स - एचटीएमएल, सीएसएस 3, सीएसएस-संक्रमण

मैं एक div (लाल एक) के साथ अपने राउंड बटन के होवर संक्रमण के दौरान बनाई गई मेरी छाया को ओवरलैप करने की कोशिश कर रहा हूं, ताकि पल्सल प्रभाव मेरे div पर नहीं बल्कि अन्य स्थानों पर दिखाया जा सके।
मेरा कोड यहाँ है:

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>

मैंने संक्रमण छाया के लिए जेड-इंडेक्स प्रॉपर्टी दी है, लेकिन जब भी मैं होवर करता हूं, बटन भी div के नीचे वापस छुपाता है - और मैं केवल छाया को छिपाना चाहता हूं। इसे कैसे प्राप्त किया जा सकता है?

उत्तर:

उत्तर № 1 के लिए 1

जैसा कि @connexo ने कहा, एक तत्व की छाया हमेशा एक ही है z-index इसके तत्व का स्तर।
एक संभावित कामकाज एक और बनाने के लिए है छिपा हुआ तत्व, जो कम परत पर खड़ा होगा, वास्तविक बटन को घुमाने के दौरान एनिमेटेड:

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 № 2

आप इसे इस तरह से काम नहीं कर सकते हैं। किसी तत्व की छाया हमेशा उसी जेड-इंडेक्स स्तर पर छाया के तत्व के रूप में रखी जाएगी।


संबंधित सवाल
सबसे लोकप्रिय