Effect
### accomplish
train of thought
- A button, click to achieve the ripple effect;
- The button has a background color, and its ripple effect needs a mask on it to achieve (positioning);
- The mask sets the animation effect, and the trigger condition of this animation effect is click;
- The click effect is only for a short time, so the animation is triggered after the click, and the animation is closed after a certain period of time. Another way of thinking, we don't need to control the trigger and pause of the animation, but we can control the creation and removal of the mask element, that is, create when click, removed after a certain period of time;
the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.box {
margin: 100px;
}
.button {
position: relative;
color: #333;
padding: 14px 40px;
background: linear-gradient(90deg, #FFF7FB, #F0F0F0);
border-radius: 45px;
margin: 0 15px;
font-size: 24px;
font-weight: 400;
text-decoration: none;
overflow: hidden;
box-shadow: 1px 1px 3px #FFECEC;
}
.button .overlay {
position: absolute;
height: 400px;
width: 400px;
background-color: #FFD2D2;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
opacity: .5;
animation: blink .5s linear infinite;
}
@keyframes blink {
0% {
opacity: .5;
height: 0px;
width: 0px;
}
100% {
opacity: 0;
height: 400px;
width: 400px;
}
}
</style>
</head>
<body>
<div class="box">
<button id="btn" class="button" onclick="addBlink(event)">
click blink
</button>
</div>
</body>
</html>
<script type="text/javascript">
const addBlink = function (e) {
console.log(e);
let overlay = document.createElement('span')
const x = e.clientX - e.target.offsetLeft
const y = e.clientY - e.target.offsetTop;
overlay.className = 'overlay'
overlay.style.left = x + 'px'
overlay.style.top = y + 'px'
document.querySelector('.button').appendChild(overlay)
setTimeout(() => {
overlay.remove()
}, 500)
}
</script>