涟漪效应问题：未达到边缘

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（因为波纹的边框）