炫酷的水波纹效果

看好了，下面是我最后的波纹了

实现代码

HTML：

<div class="container"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

CSS:

body{
  height: 100vh;
  width: 100vw;
}
.container{
  background: url(./img/bg.png);
  background-attachment: fixed;
  background-position: center center;
  position: relative;
  height: 100%;
  width: 100%;
  background-size: auto 100%;
}

.wave-position{
  position: absolute;
  height: 300px;
  width: 300px;
}
.wave {
  position: absolute;
  top: calc((100% - 30px)/2);
  left: calc((100% - 30px)/2);
  width: 30px;
  height: 30px;
  border-radius: 300px;
  background: url(./img/bg.png);
  background-attachment: fixed;
  background-position: center center;
}

.wave0 {
  z-index: 2;
  background-size: auto 106%;
  -webkit-animation: w 1s forwards;
}

.wave1 {
  z-index: 3;
  background-size: auto 102%;
  -webkit-animation: w 1s .2s forwards;
}

.wave2 {
  z-index: 4;
  background-size: auto 104%;
  -webkit-animation: w 1s .4s forwards;
}

.wave3 {
  z-index: 5;
  background-size: auto 101%;
  -webkit-animation: w 1s .5s forwards;
}

.wave4 {
  z-index: 6;
  background-size: auto 102%;
  -webkit-animation: w 1s .8s forwards;
}

.wave5 {
  z-index: 7;
  background-size: auto 100%;
  -webkit-animation: w 1s 1s forwards;
}

@-webkit-keyframes w {
  0% {
    top: calc((100% - 30px)/2);
    left: calc((100% - 30px)/2);
    width: 30px;
    height: 30px;
  }

  100% {
    top: calc((100% - 300px)/2);
    left: calc((100% - 300px)/2);
    width: 300px;
    height: 300px;
  }
}

JS:

var mx, my, timer;
var z = 2;
$(document).on('click', function (e) {
  console.log(e);
  
  mx = e.pageX;
  my = e.pageY;
  z = z + 1;
  _wave(mx, my, z);
});

function _wave(i, j, k) {
  console.log(i, j, k);
  
  $('.container').prepend(
    '<div class="wave-position water' + k + '" style="z-index:' + k + ';top:' + (j - 150) + 'px;left:' + (i - 150) + 'px;">' +
    '<div class="wave-body">' +
    '<div class="wave wave5"></div>' +
    '<div class="wave wave4"></div>' +
    '<div class="wave wave3"></div>' +
    '<div class="wave wave2"></div>' +
    '<div class="wave wave1"></div>' +
    '<div class="wave wave0"></div>' +
    '</div>' +
    '</div>'
  );
  setTimeout(function () {
    $('.water' + k).remove();
  }, 3000);
}