rendering

Realize the principle of

Use JS to get the position of the mouse relative to the button, and set to the corrugated ball. Use scale() plus CSS animation to achieve the expansion of the corrugated ball.

Implementation steps

1, preset the ball style and animation effect

2. Monitor button click events to obtain the position of the mouse relative to the button

Create a DOM node

4. Add the corresponding class and initial position styles for the DOM node

5. Listen for the end of animation event and remove the ball

Code implementation

The CSS part

#button {
    position: relative;
    display: block;
    margin: 200px auto;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    transform: translateY(-50%);
    /* Pseudo classes will expand and overflow the button box, so you need to set overflow: hidden to hide */
    overflow: hidden;
    border: 1px solid rgba(0.0.0.4);
    user-select:none;
}
#button:hover {
    background: rgba(0.0.0.4);
}

/* Small ball style for water ripple effect */
#button > .ripple-ball {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0.0.0.4);
    animation: ripple 1s;	
}
/* Small ball animation */
@keyframes ripple {
    0% {
        transform: scale(2);
    } 
    /* Ripple expansion */
    85% {
        transform: scale(25);
    }
    100% {
        opacity: 0}}Copy the code

HTML part

<div id="button">
    <p>button</p>
</div>
Copy the code

Js part

const btn = document.getElementById('button');

btn.onclick = (event) = > {
    // Create a corrugated dom
    const rippleBall = document.createElement('span')
    
    // Get the initial position of the dom
    const x = event.clientX - btn.getBoundingClientRect().x - 10
    const y = event.clientY - btn.getBoundingClientRect().y - 10
    
    // Set the ripple ball style
    rippleBall.style.left = x + 'px'
    rippleBall.style.top = y + 'px'
    rippleBall.classList.add('ripple-ball')
    
    // Corrugated ball mount
    btn.appendChild(rippleBall)
    
    // Listen for the animation end event to remove the ball
    rippleBall.addEventListener('animationend'.() = > {
        btn.removeChild(rippleBall)
    })
}
Copy the code