Эффект затухания радиальной волны для изображений/видео при нажатии кнопки ⇐ CSS

[Anonymous]

Я застрял на создании эффекта затухания CSS в форме волны, который я нашел на Hape.io. Чтобы дать ссылку на него, я прикрепил этот фрагмент видео. https://imgur.com/9lKtImn

Итак, по сути, я пришел к выводу, что они используют холст для создания волнообразного эффекта при нажатии кнопки, и они сделали этот переход происходящим в течение 3-4 секунд. секунды. Если вы прекратите нажимать на кнопку до завершения перехода, она вернется к исходной форме.

Я не очень хорошо понимаю, как использовать холст для создания такого эффекта. Итак, я пытаюсь создать аналогичный эффект CSS, но это выглядит не так круто, как приведенный выше. Как мне решить эту проблему?

body { фон: #111; } .круг { позиция: абсолютная; осталось: 40%; верх: 30 пикселей; } .элемент { позиция: абсолютная; слева: 50%; трансформировать: транслировать(-50%,0%); высота: 200 пикселей; ширина: 200 пикселей; граница-радиус: 50%; фон: красный; размер коробки: граница-коробка; -moz-box-sizing: граница-коробка; выравнивание текста: по центру; цвет: #dbdbdb; шрифт: 300 20px'verdana'; } .item:hover .ring:nth-child(1) { -webkit-animation: пульсация 1 с чередуется; анимация: пульсация чередуется по 1 с; } .item:hover .ring:nth-child(2) { -webkit-animation: пульсация 1 с чередуется; -webkit-animation-delay: 0,20 с; анимация: пульсация чередуется по 1 с; задержка анимации: 0,20 с; } .item:hover .ring:nth-child(3) { -webkit-animation: пульсация 1 с чередуется; -webkit-animation-delay: 0,40 с; анимация: пульсация чередуется по 1 с; задержка анимации: 0,40 с; } .кольцо { позиция: абсолютная; слева: 0; верх: 0; высота: 194 пикселей; ширина: 194 пикселей; граница-радиус: 50%; граница: 3 пикселя, сплошная #aba; фон: прозрачный; непрозрачность: 0; } @-webkit-keyframes пульсация { 0% { высота: 0 пикселей; ширина: 0 пикселей; слева: 97 пикселей; верх: 97 пикселей; непрозрачность: 0; } 80% { непрозрачность: 0,8; } 100% { высота: 194 пикселей; ширина: 194 пикселей; слева: 0; верх: 0; непрозрачность: 0; } Наведите указатель мыши