实现按钮点击的水波涟漪效果

前端

2024-01-01 18:54:25

按钮点击的水波涟漪效果：提升用户体验和视觉吸引力的创新交互

什么是按钮点击的水波涟漪效果？

当用户点击按钮时，一个圆形的波纹从手指接触点扩散开来，营造出涟漪效果，就像水面上丢了一块小石头。这种引人注目的视觉效果不仅美观，还具有实用的优势。

为什么按钮点击的水波涟漪效果如此受欢迎？

提升用户体验： 涟漪效果提供了即时的反馈，告知用户他们的点击已被注册。这增强了交互性，让用户更有信心。
改善视觉吸引力： 涟漪效果增添了一层美感，使按钮更具吸引力和令人愉悦。它将注意力吸引到按钮上，鼓励用户采取行动。
符合现代设计趋势： 水波涟漪效果与现代网页设计的简洁性和用户友好性趋势相得益彰。它创造了一种现代感和时尚感。

如何实现按钮点击的水波涟漪效果？

实现水波涟漪效果相对简单，只需几个 CSS 属性和一个 span 元素：

创建 span 元素： 添加一个 span 元素作为波纹容器，并将其定位在按钮上。设置其大小、位置、形状和边框。
添加动画效果： 使用 CSS 动画为 span 元素添加缩放和透明度变化效果。这将创建从手指接触点扩散开来的波纹效果。
动态添加 span 元素： 在按钮的点击事件处理函数中，将 span 元素动态添加到按钮中，并触发动画效果。

代码示例：

<button id="my-button">点击我</button>

<style>
#my-button {
  position: relative;
  width: 200px;
  height: 50px;
  background-color: #428bca;
  color: #fff;
  border: none;
}

#my-button-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: #fff;
  border-radius: 50%;
  opacity: 1;
  transform: scale(0);
  transition: all 0.5s ease-out;
}

#my-button:hover #my-button-ripple {
  animation: ripple 0.5s linear infinite;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(4);
    opacity: 0.5;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
</style>

<script>
const button = document.getElementById('my-button');

button.addEventListener('click', (e) => {
  const ripple = document.createElement('span');
  ripple.id = 'my-button-ripple';
  ripple.style.top = `${e.offsetY}px`;
  ripple.style.left = `${e.offsetX}px`;
  button.appendChild(ripple);

  setTimeout(() => {
    ripple.remove();
  }, 500);
});
</script>