如何在单击按钮时创建波纹效果？

波纹效果是现代设计趋势的一部分。你已经在很多网站上看到过它，特别是在谷歌的材料设计语言上。它提供了一个按钮按压效果。我们可以通过向按钮添加子元素并为其设置动画来产生涟漪效果。我们也可以使用Javascript根据光标在按钮上的位置来定位它。

1. 基本样式： position:relative属性为按钮添加基本样式以定位内部 span 标记和overflow:hidden以防止 span 超出按钮。

   
   
     
   
       
     
       
   
     
   
       
           Enter GeeksforGeeks
       
   
     
   
   

   输出：
   

2. 为 span 元素添加样式：现在添加将在单击按钮时显示的 span 元素的样式。

3. 添加 JavaScript：现在我们将在按钮点击时添加 span 元素，并根据鼠标点击的位置。单击按钮时，我们必须执行以下操作：
   1. 创建span元素并向其添加涟漪类。
   2. event变量获取光标的点击位置。
   3. 设置span元素的位置。
   4. 删除 span 元素以避免在按钮中垃圾邮件 span 元素。

       const btn = document.querySelector(".btn");
     
       // Listen for click event
       btn.onclick = function (e) {
     
           // Create span element
           let ripple = document.createElement("span");
     
           // Add ripple class to span
           ripple.classList.add("ripple");
     
           // Add span to the button 
           this.appendChild(ripple);
     
           // Get position of X
           let x = e.clientX - e.target.offsetLeft;
     
           // Get position of Y 
           let y = e.clientY - e.target.offsetTop;
     
           // Position the span element
           ripple.style.left = `${x}px`;
           ripple.style.top = `${y}px`;
     
           // Remove span after 0.3s
           setTimeout(() => {
               ripple.remove();
           }, 300);
     
       };

最终输出将如下所示：