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

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

它只是在按钮或div内附加了一个圆形div，当我单击容器时，它将scale（）动画应用于圆。

我将具有位置：相对和溢出：隐藏的“波纹”类应用于容器（按钮），而在圆形div位置：绝对

目前，它适用于按钮，但对于divs而言，溢流未受到重视，圆环向外流动。

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

最佳答案

内联元素上未设置溢出，请将.ripple更改为内联块。这将使其保持内联，但是您将能够像块元素一样对其进行样式设置。

关于css - 隐藏溢位不适用于绝对定位的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33832701/