css - 涟漪效应问题: not reaching edges

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 倍大小，因此您的效果将支持的最大按钮宽度略低于 500 像素(因为波纹的边框)