Question

我试图在jquery + css中复制谷歌的涟漪效应。

它只是在按钮或div中添加一个圆形div，当我点击容器时，它会将一个scale（）动画应用到圆圈。

我向容器（按钮）申请＆＃34;涟漪＆＃34;具有位置的类：relative和overflow：hidden，而在圆形div位置：绝对

目前它适用于按钮，但对于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

内联元素上没有设置溢出，将.ripple更改为内联块。这将使其保持内联，但您可以将其设置为块元素。

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

1 个答案: