方法 1：使用 CSS 背景

2024-02-10 12:24:04

知乎关注按钮的波纹涟漪效果

当你在知乎上关注某人时，你会注意到一个微妙但引人注目的视觉效果：关注按钮周围出现一个涟漪波纹，从点击点向外扩散。这种波纹效果不仅仅是一个美观的点缀，它还为用户提供了反馈，表明他们的操作已成功注册。

在本文中，我们将深入探讨实现这种波纹涟漪效果的三种不同方法，每种方法都有其独特的优点和缺点。

第一种方法是最简单的，它利用 CSS 背景属性在按钮上创建波纹效果。为此，我们将创建一个具有适当半径的圆形背景，并在鼠标点击时对其进行动画处理。

.button {
  background: radial-gradient(circle, #000 0%, #000 30%, transparent 30%);
  border-radius: 50%;
  cursor: pointer;
}

.button:active {
  background-size: 100%;
  transition: background 0.3s ease-out;
}

这种方法简单易行，但它只能创建单一的、圆形的波纹效果。此外，它可能会与某些浏览器中的其他 CSS 动画产生冲突。

第二种方法使用 SVG（可缩放矢量图形）来创建更复杂的波纹效果。我们创建一个包含波纹形状的 SVG，并使用 CSS 动画对其进行变形。

<svg class="ripple">
  <path d="M0 0 L50 0 L50 50 L0 50 Z" />
</svg>

.ripple {
  transform: scale(0);
  transform-origin: center;
  animation: ripple 0.5s ease-out forwards;
}

@keyframes ripple {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

这种方法提供了更大的灵活性，因为它允许我们创建任意形状的波纹。然而，它比 CSS 背景方法更复杂，并且在低功耗设备上可能表现不佳。

最后一种方法使用 JavaScript 来动态创建和动画化波纹效果。我们将创建一个 canvas 元素并使用 Canvas API 在其上绘制波纹。

const canvas = document.getElementById('ripple-canvas');
const ctx = canvas.getContext('2d');

function createRipple(e) {
  const x = e.clientX;
  const y = e.clientY;

  ctx.beginPath();
  ctx.arc(x, y, 50, 0, 2 * Math.PI);
  ctx.fillStyle = '#000';
  ctx.fill();

  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }, 300);
}