css - 溢出隐藏不适用于绝对定位的元素

Question

我正在尝试在 jquery + css 中复制 google 的涟漪效应。

它只是在按钮或 div 内附加一个圆形 div，当我单击容器时，它会向圆应用 scale() 动画。

我在容器(按钮)上应用了具有position:relative和溢出:隐藏的“波纹”类，而在圆形 div position:absolute

目前它适用于按钮，但对于 div，溢出不受重视，圆圈流出它。

button, .button {
    padding:0.8em 1em;
    border:none;
    background:#09F;
    color:#fff;
    border-radius:0.5em;
    cursor:pointer;
}

.ripple {
    display:inline;
    user-select: none;
    position: relative;
    overflow:hidden;
    outline: none;
    -webkit-transform: rotate(0.000001deg);
}


.effetto_ripple {
    position:absolute;
    border-radius:50%;
    background-color:rgba(255,255,255,0.4);
    transform:scale(0) translateZ(0);
}

.effetto_ripple.animato {
    animation:ripple 0.6s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity:0.9;
    }

    100% {
        transform: scale(2.5);
        opacity:0;
    }
}

这是完整的工作代码 http://codepen.io/anon/pen/zvXKgz

Answer 1

Overflow 未设置在内联元素上，将 .ripple 更改为 inline-block。这将使它保持内联，但您将能够像 block 元素一样设置它的样式。