按钮点击的水波效果

实现思路：水波效果可以用一个 span 来模拟，动画效果是缩放从 0 到大于零的值（比如 4），同时透明度从 1 到 0。点击 button 后，我们把这个 span 添加到 button 里即可。

HTML

结构比较简单，我们用 div 来表示 button：

<div class="button">
Click Me

</div>

CSS

给 div 加点样式，让它看起来像个 button：

.button {

  margin-left: 100px;
position: relative;
width: 100px;
padding: 8px 10px;
border: 1px solid lightgray;

  border-radius: 5px;
cursor: pointer;
overflow: hidden;

  user-select: none;

}

定义水波样式，默认 scale 为 0：

.ripple {
position: absolute;

  border-radius: 50%;
transform: scale(0);
animation: ripple 600ms linear;

  background-color: rgba(30, 184, 245, 0.7);

}

水波动画：

@keyframes ripple {

  to {
transform: scale(4);
opacity: 0;

  }

}

javascript

点击按钮时，生成水波效果，先把结构加上：

function playRipple(event) {
// TODO：生成水波效果

}

// 为 button 添加点击事件
document

  .querySelector('.button')

  .addEventListener('click', event => {
playRipple(event);

  })

我们看一下水波如何生成，为了方便理解，可以结合图来看，其中黑点表示鼠标点击的位置，蓝色的圆是点击后水波默认大小的圆，** ？**就表示要计算的 circle.style.left：

function playRipple(event) {
const button = event.currentTarget;
const buttonRect = button.getBoundingClientRect();

const circle = document.createElement("span");
// 圆的直径
const diameter = Math.max(button.clientWidth, button.clientHeight);
// 圆的半径
const radius = diameter / 2;

// 计算 ripple 的位置

  circle.style.width = circle.style.height = `${diameter}px`;

  circle.style.left = `${event.clientX - (buttonRect.left + radius)}px`;

  circle.style.top = `${event.clientY - (buttonRect.top + radius)}px`;
// 添加 ripple 样式

  circle.classList.add("ripple"); 
// 移除已存在的 ripple
removeRipple(button);
// 将 ripple 添加到 button 上

  button.appendChild(circle);

}

// 移除 ripple
function removeRipple(button) {
const ripple = button.querySelector(".ripple");

if (ripple) {

    ripple.remove();

  }

}

看下效果：

总结

又水了一篇文章😂，如果对你有启发，欢迎点赞、评论。

参考

css-tricks.com/how-to-recr…