js 鼠标点击后出现波纹特效功能

要实现鼠标点击后出现波纹特效的功能，你可以使用JavaScript来监听鼠标点击事件，并在点击位置添加一个波纹动画元素。以下是一个使用JavaScript实现鼠标点击波纹特效的示例：

HTML:
 

<div id="container"></div>

CSS:

#container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.wave {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: rgba(0, 0, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: waveAnim 1s linear;
}

@keyframes waveAnim {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

JavaScript:
 

document.addEventListener('click', function(event) {
  var wave = document.createElement('div');
  wave.className = 'wave';
  wave.style.left = (event.clientX - 50) + 'px';
  wave.style.top = (event.clientY - 50) + 'px';
  document.getElementById('container').appendChild(wave);
  
  setTimeout(function() {
    wave.remove();
  }, 1000);
});

在上述示例中，我们首先创建一个容器元素，并为其设置了一个id为`container`，用来容纳波纹特效元素。通过CSS定义了波纹特效元素的样式，包括宽度、高度、背景颜色等。

在JavaScript部分，我们使用`addEventListener`方法来监听文档的点击事件。当点击事件发生时，我们创建一个波纹特效元素，并设置其样式。通过`event.clientX`和`event.clientY`获取到点击位置的坐标，然后将特效元素的位置设置在点击位置的上方。

接着，我们将创建的波纹特效元素添加到容器元素中，并使用`setTimeout`函数来延迟1秒后将特效元素移除。

通过这样的方式，当鼠标点击时，会在点击位置出现一个波纹特效元素，并在1秒后消失。你可以根据需要自定义特效元素的样式、特效动画等来调整效果。