当前位置：首页 > JavaScript

js实现波纹

2026-04-06 22:51:16JavaScript

实现波纹效果的JavaScript方法

使用JavaScript和CSS结合实现点击或悬停时的波纹效果，以下是两种常见实现方式：

方式一：纯CSS实现（简单波纹） 通过CSS的::after伪元素和动画实现基础波纹效果：

.ripple-button {
  position: relative;
  overflow: hidden;
}
.ripple-button::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10.01%);
  transform: scale(10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}
.ripple-button:active::after {
  transform: scale(0);
  opacity: 0.3;
  transition: 0s;
}

方式二：JavaScript动态创建波纹 更灵活的动态实现方法：

function createRipple(event) {
  const button = event.currentTarget;
  const circle = document.createElement("span");
  const diameter = Math.max(button.clientWidth, button.clientHeight);
  const radius = diameter / 2;

  circle.style.width = circle.style.height = `${diameter}px`;
  circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;
  circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;
  circle.classList.add("ripple");

  const ripple = button.getElementsByClassName("ripple")[0];
  if (ripple) ripple.remove();

  button.appendChild(circle);
}

// 为元素添加事件监听
document.querySelectorAll('.ripple-btn').forEach(btn => {
  btn.addEventListener('click', createRipple);
});

对应CSS样式：

js实现波纹

.ripple-btn {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(0);
  animation: ripple 600ms linear;
  pointer-events: none;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}