CSS 仅阴影的 z-index

Question

我正在尝试用 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>

我已经为过渡阴影指定了 z-index 属性，但每次悬停时，按钮也会隐藏在 div 下方 - 我只想隐藏阴影。我怎样才能做到这一点？

Answer 1

你不能让它以这种方式工作。元素的阴影将始终堆叠在与具有阴影的元素相同的 z-index 级别上。

Answer 2

正如@connexo 所说，元素的阴影总是在其元素的相同 z-index 级别上。
一种可能的解决方法是创建另一个 hidden 元素，该元素将位于较低层，在悬停您的真实按钮时动画：

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>

CSS 仅阴影的 z-index

CSS z-index for Shadow only

html

css

css-transitions