涟漪效应问题:没有达到边缘

Question

我目前正在尝试创建CSS涟漪效果。当我缩放按钮时，波纹没有到达按钮的边缘。每个按钮尺寸的纹波币增长速度都相同。这是一个常规按钮。按下按钮时会添加 CSS。

这是我的CSS代码：

position: absolute;
background: #000;
border-radius: 50%;
width: 5px;
height: 5px;
animation: ripple 0.88s linear;
opacity: 0;
pointer-events: none;
@keyframes ripple {
from {
transform: scale(1);
opacity: 0.4
}
to {
transform: scale(100);
opacity: 0;
}
}

提前感谢！

Answer 1

将涟漪效果与按钮元素分开。使用 span 元素执行动画。这样：

$(document).ready(function(){
$('button').on('click',function(){
$(this).find('.ripple').remove();
$(this).append($('<span class="ripple"></span>'));
});
});

button{
position: relative;
overflow: hidden;
width: 100px;
height: 25px;
}
button.big{
width: 200px;
height: 50px;
}
button.bigger{
width: 400px;
height: 100px;
}
.ripple{
position: absolute;
background: #000;
border-radius: 50%;
width: 5px;
height: 5px;
opacity: 0;
pointer-events: none;
animation: ripple 0.88s linear;
transform: scale(1);

top: 50%;
left: 50%;
}
@keyframes ripple {
from {
transform: scale(1);
opacity: 0.4
}
to {
transform: scale(100);
opacity: 0;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="">Ripple!</button>
<button class="big">Ripple!</button>
<button class="bigger">Ripple!</button>

请记住，由于您正在缩放到 100 倍的大小，因此您的效果将支持的最大按钮宽度略低于 500px(因为波纹的边框(