CSS -волновой эффект на зависание? ⇐ Html

[Anonymous]

У меня есть кнопка, где бы я хотел бы немного прозрачного наложения, чтобы «скользить сквозь кнопку на зависании. class = "Snippet">

Код: Выделить всё

const isMobile = window.navigator.userAgent.match(/Mobile/) && window.navigator.userAgent.match(/Mobile/)[0] === "Mobile";
const event = isMobile ? "touchstart" : "click";

const button = document.querySelectorAll('*[data-animation="ripple"]'),
container = document.querySelector(".container");

for (var i = 0; i < button.length; i++) {
const currentBtn = button[i];

currentBtn.addEventListener(event, function(e) {

e.preventDefault();
const button = e.target,
rect = button.getBoundingClientRect(),
originalBtn = this,
btnHeight = rect.height,
btnWidth = rect.width;
let posMouseX = 0,
posMouseY = 0;

if (isMobile) {
posMouseX = e.changedTouches[0].pageX - rect.left;
posMouseY = e.changedTouches[0].pageY - rect.top;
} else {
posMouseX = e.x - rect.left;
posMouseY = e.y - rect.top;
}

const baseCSS = `position: absolute;
width: ${btnWidth * 2}px;
height: ${btnWidth * 2}px;
transition: all linear 700ms;
transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);
border-radius: 50%;
background: var(--color-ripple);
top:${posMouseY - btnWidth}px;
left:${posMouseX - btnWidth}px;
pointer-events: none;
transform:scale(0)`

var rippleEffect = document.createElement("span");
rippleEffect.style.cssText = baseCSS;

//prepare the dom
currentBtn.style.overflow = "hidden";
this.appendChild(rippleEffect);

//start animation
setTimeout(function() {
rippleEffect.style.cssText = baseCSS + `transform:scale(1);  opacity: 0;`;
}, 5);

setTimeout(function() {
rippleEffect.remove();
//window.location.href = currentBtn.href;
}, 700);
})
}< /code>
:root {
/* if u want to change the color of
* the ripple change this value
*/
--color-ripple: rgba(255, 255, 255, 0.8);
}

body {
background: #36353c;
}

.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 200px;
margin: auto;
}

*[data-animation="ripple"] {
position: relative;
/*Position relative is required*/
height: 100%;
width: 100%;
display: block;
outline: none;

:root {
/* if u want to change the color of
* the ripple change this value
*/
--color-ripple: rgba(255, 255, 255, 0.8);
}

body {
background: #36353c;
}

.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 200px;
margin: auto;
}

*[data-animation="ripple"] {
position: relative;
/*Position relative is required*/
height: 100%;
width: 100%;
display: block;
outline: none;
padding: 20px;
color: #fff;
text-transform: uppercase;
background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
box-sizing: border-box;
text-align: center;
line-height: 14px;
font-family: roboto, helvetica;
font-weight: 200;
letter-spacing: 1px;
text-decoration: none;
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
/*border-radius: 50px;*/
-webkit-tap-highlight-color: transparent;
}

*[data-animation="ripple"]:focus {
outline: none;
}

*[data-animation="ripple"]::selection {
background: transparent;
pointer-events: none;
}

padding: 20px;
color: #fff;
text-transform: uppercase;
background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
box-sizing: border-box;
text-align: center;
line-height: 14px;
font-family: roboto,
helvetica;
font-weight: 200;
letter-spacing: 1px;
text-decoration: none;
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
/*border-radius: 50px;*/
-webkit-tap-highlight-color: transparent;
}

*[data-animation="ripple"]:focus {
outline: none;
}

*[data-animation="ripple"]::selection {
background: transparent;
pointer-events: none;
}< /code>

Click Me

Можно ли достичь чего -то подобного без необходимости нажимать на кнопку, но просто зависят над ней?

Подробнее здесь: https://stackoverflow.com/questions/482 ... t-on-hover