Проблема с волновым эффектом: не доходит до краев - PullRequest
Новая
       7

Проблема с волновым эффектом: не доходит до краев

0 голосов
/ 05 сентября 2018

В настоящее время я пытаюсь создать волновой эффект 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;
                }
            }

Заранее спасибо!

1 Ответ

0 голосов
/ 06 сентября 2018

Отделите эффект ряби от элемента кнопки. Используйте элемент 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>

Имейте в виду, что, поскольку вы масштабируете до размера 100x, самые большие кнопки, которые будет поддерживать ваш эффект, имеют ширину чуть меньше 500 пикселей (из-за границ пульсации)

...