css实现水球波纹

<template>
  <div>
    <div class="wave-box">
      <div class="wave"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.wave-box {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid #09e5f0;
  box-shadow: 0px 0px 30px 2px #98c3d5;
}

.wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #09e5f0;
  border-radius: 50%;
  overflow: hidden;
}
.wave::before,
.wave::after {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  width: 250%;
  height: 250%;
}
.wave::after {
  border-radius: 40%;
  background-color: #071c5c;
  animation: shi 5s linear infinite;
  transform: translate(-50%, -65%) rotate(0deg);
}
@keyframes shi {
  0% {
    transform: translate(-50%, -65%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -65%) rotate(360deg);
  }
}
.wave::before {
  border-radius: 42%;
  background-color: rgb(240, 228, 228, 0.2);
  transform: translate(-50%, -60%) rotate(0deg);
  animation: xu 5s linear infinite;
}
@keyframes xu {
  0% {
    transform: translate(-50%, -60%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -60%) rotate(360deg);
  }
}
</style>