Question

我正在创建一个带有连锁效果的素材按钮。涟漪动画.circle看起来像是在它的父button之上制作动画，而不是在其下面，这就是文本被覆盖的原因。我确信我有使用z-index的所有正确语法。这是codepen链接http://codepen.io/theMugician/pen/Bjadpj

button{
  z-index: 2;
  border: 3px solid #222;
  background: transparent;
  overflow: hidden;
  width: 100%;
  outline: none;
  position: relative;

  span{
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.5em;
    color: #222;
    position: relative;
    display: block; 
    user-select: none;
    position: relative;
    overflow: hidden;
    padding: 20px;
    &:hover{cursor: pointer;}
  }
}

.circle{
  z-index: 1;
  display: block; 
  position: absolute;
  background: #5677fc;
  border-radius: 50%;
  transform: scale(0);

  &.animate{
    z-index: 1;
    animation: effect 0.65s linear;}
}

@keyframes effect{
    100%{
    z-index: 1;
    opacity: 1; 
    transform: scale(2.5);
  }
}

Answer 1

您正在向span添加圈button span。因此，圈span成为按钮span的子项，并且您的z索引无效。只需将click事件绑定到button元素本身就可以解决您的问题：

$("button").click(function(e){
....

因此按钮结构变为：

<button>
  <span>button</span>
  <span class="circle animate"></span>
</button>

而不是这个：

<button>
  <span>button
     <span class="circle animate"></span>
  </span>
</button>

更新了Codepen： http://codepen.io/anon/pen/mVdBPO

材料按钮波纹z-index

1 个答案: