js La función de efecto dominó aparece después de hacer clic con el mouse

Para obtener el efecto dominó después de hacer clic con el mouse, puede usar JavaScript para monitorear el evento de clic del mouse y agregar un elemento de animación de ondulación en la posición del clic. El siguiente es un ejemplo del uso de JavaScript para implementar el efecto dominó del clic del mouse:

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);
});

En el ejemplo anterior, primero creamos un elemento contenedor y establecemos una identificación de "contenedor" para que contenga el elemento de efecto dominó. El estilo del elemento de efecto dominó se define a través de CSS, incluido el ancho, la altura, el color de fondo, etc.

En la sección de JavaScript, usamos el método `addEventListener` para escuchar los eventos de clic del documento. Cuando ocurre el evento de clic, creamos un elemento de ondulación y establecemos su estilo. Obtenga las coordenadas de la posición en la que se hizo clic a través de `event.clientX` y `event.clientY`, y luego establezca la posición del elemento de efectos especiales sobre la posición en la que se hizo clic.

A continuación, agregamos el elemento de efecto dominó creado al elemento contenedor y usamos la función `setTimeout` para eliminar el elemento de efecto después de un retraso de 1 segundo.

De esta manera, cuando se hace clic con el mouse, aparecerá un elemento de efecto especial ondulado en la posición en la que se hizo clic y desaparecerá después de 1 segundo. Puede personalizar el estilo de los elementos de efectos especiales, la animación de efectos especiales, etc. para ajustar el efecto según sus necesidades.