CSS 波纹效果 - CSS

如果您想要为网站或应用程序添加一些动态效果，波纹效果是很不错的选择。它给用户带来了更加直观、更加互动的视觉体验，同时又不会影响网站的性能。在这篇文章中，我们将介绍如何使用 CSS 实现简单的波纹效果。

前提条件

在实现波纹效果之前，您需要对 CSS 略有了解。具体来说，您需要知道如何：

• 创建 HTML 元素
• 使用 CSS 样式
• 使用 CSS 动画和过渡效果

实现步骤

根据波纹效果的需求，我们需要一个按钮和一个用于波纹效果的伪元素。下面的示例代码中，我们创建了一个 button 元素，并用 CSS 添加了一些样式：

<button class="ripple-button">点击我</button>

.ripple-button {
  border: none;
  outline: none;
  padding: 12px;
  background-color: #26a69a;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.ripple-button::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

首先，我们为按钮添加了一些基本的样式，例如背景色、圆角等等。为了使波纹效果正常工作，在按钮上添加了伪元素 ::before。这个元素的作用是触发波纹效果。

接下来，我们给按钮添加了一些基本样式，例如 position: relative，这是为了让伪元素相对于按钮进行定位。伪元素也使用了 position: absolute，并设置了它的 top 和 left 值为 0，这样它就位于按钮的最上层。

注意，伪元素的 z-index 值为 -1，这是为了使它位于原始按钮之下。如果您希望伪元素位于按钮之上，可以将 z-index 值设置为比按钮更高的值。

现在，我们需要添加一个波纹效果。当用户单击按钮时，在伪元素上添加一个圆形的波纹扩散效果。为了实现这个效果，我们需要使用 CSS3 动画和过渡效果。

波纹动画效果

为了实现波纹效果，我们需要给伪元素添加 CSS3 动画效果。下面是动画效果示例：

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

这个关键帧动画从最初状态开始，逐渐变形、变大，最终消失不见。transform: scale(2.5) 使圆形扩散 2.5 倍， opacity: 0 使伪元素透明度逐渐减少。

波纹过渡效果

为了使动画效果平滑显示，我们需要给伪元素添加 CSS 过渡效果。下面是过渡效果示例：

.ripple-button::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.ripple-button::before.ripple-active {
  transform: scale(2.5);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

上面代码中，我们为伪元素添加了 transition 属性，并指定了要过渡的 CSS 属性以及持续时间。因此，在用户点击按钮时，伪元素的 opacity 值会在 0.3 秒内逐渐变为 1。然后，当过渡完成后，伪元素会立即应用 ripple-active 类。

ripple-active 类会触发 CSS3 动画，并在动画结束时使伪元素逐渐消失。动画持续时间为 0.5 秒，过渡属性是 transform 和 opacity。

JS实现效果

下面是完整代码，可以通过JS来实现效果：

// 获取所有的按钮元素
const buttons = document.querySelectorAll('.ripple-button');

for (const button of buttons) {
  button.addEventListener('click', function (e) {
    // 获取按钮距离文档顶部和左边的距离
    const x = e.clientX - e.target.offsetLeft;
    const y = e.clientY - e.target.offsetTop;

    // 创建“水波纹”元素
    const ripple = document.createElement('span');
    // 给新元素添加类名 ripple-active
    ripple.classList.add('ripple-active');
    // 设置 ripple 的位置
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;

    // 在按钮元素中添加水波纹
    this.appendChild(ripple);

    // 删除 ripple 元素
    setTimeout(() => {
      ripple.remove();
    }, 1000);
  });
}

上面的代码是一个简单的 JavaScript 脚本，它使用事件监听器来捕获点击事件。在按钮上点击鼠标时，它会计算距离按钮左上角的鼠标坐标，并在该位置创建一个新的水波纹元素。

我们还设置了一个 1 秒钟的定时器来删除这个水波纹元素。这样，每次单击按钮时，只会出现一个水波纹，而不会出现多个。

最终效果

综合上述的CSS与JS代码，我们最终实现了一个很简单的波纹效果。当用户单击按钮时，它会在点击位置扩散一个圆形波纹，然后逐渐消失。如下代码所示：

<button class="ripple-button">点击我</button>

.ripple-button {
  border: none;
  outline: none;
  padding: 12px;
  background-color: #26a69a;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.ripple-button::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.ripple-button::before.ripple-active {
  transform: scale(2.5);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

// 获取所有的按钮元素
const buttons = document.querySelectorAll('.ripple-button');

for (const button of buttons) {
  button.addEventListener('click', function (e) {
    // 获取按钮距离文档顶部和左边的距离
    const x = e.clientX - e.target.offsetLeft;
    const y = e.clientY - e.target.offsetTop;

    // 创建“水波纹”元素
    const ripple = document.createElement('span');
    // 给新元素添加类名 ripple-active
    ripple.classList.add('ripple-active');
    // 设置 ripple 的位置
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;

    // 在按钮元素中添加水波纹
    this.appendChild(ripple);

    // 删除 ripple 元素
    setTimeout(() => {
      ripple.remove();
    }, 1000);
  });
}

总结

在本文中，我们介绍了如何使用 CSS 实现简单的波纹效果。通过添加伪元素和使用 CSS3 动画和过渡效果，我们实现了在用户单击按钮时显示圆形波纹的动态效果。

如果您想要进一步了解如何使用 CSS、JavaScript 和 HTML 创建网页效果，并提高您的 Web 开发技能，请查看我们的其他文章以获取更多的信息。