Verwenden Sie CSS, um einen kreisförmigen Welleneffekt zu erzielen

.Welle {
        Position: relativ; 
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: @Farbe;
    Rand: 5px durchgezogen #76daff;
    Randradius: 50 %;
    Überlauf: versteckt;
}
.wave-box::vorher,
.wave-box::nach {
      Inhalt: '';
      Position: absolut;
      oben: 0;
      links: 50%;
      Breite: 400px;
      Höhe: 400px;
      Randradius: 45 %;
      -webkit-transform: übersetzen(-50 %, -70 %);
      transformieren: übersetzen (-50 %, -70 %);
      Hintergrund: rgba(255, 255, 255, 0,5);
      -webkit-animation: 10 s linear unendlich rotieren;
      Animation: 10 s linear unendlich rotieren;
      Z-Index: 10;
}
@keyframes drehen {
  50 % {
            -webkit-transform: verschieben (-50 %, -75 %) drehen (180 Grad);
            transformieren: verschieben (-50 %, -75 %) drehen (180 Grad);
  }
  100 % {
            -webkit-transform: verschieben(-50 %, -70 %) drehen(180 Grad);
            transformieren: verschieben (-50 %, -70 %) drehen (180 Grad);
  }
}
//Oder es ist bequemer, eine vorkompilierte Sprache zu verwenden, hier verwenden wir weniger
.Welle(@Breite; @Höhe; @Farbe) {
    Position: relativ; 
    Breite: @width;
    Höhe: @Höhe;
    Hintergrund: @Farbe;
    Rand: 5px durchgehende @Farbe;
    Randradius: 50 %;
    Überlauf: versteckt;
    &::vor,
    &::nach {
        Inhalt: '';
        Position: absolut;
        oben: 0;
        links: 50%;
        Breite: @width * 2;
        Höhe: @Höhe * 2;
        Randradius: 45 %;
        transformieren: übersetzen (-50 %, -70 %);
        Hintergrund: rgba(255,255,255,0,5);
        Animation: 10 s linear unendlich rotieren;
        Z-Index: 10;
    }
    &::nach {
        Randradius: 47 %;
        Hintergrund: rgba(255,255,255,0,5);
        Animation: 10 s linear drehen, -5 s unendlich;
        Z-Index: 20;
    }
}
//Rufen Sie .wave-box { auf.
    .wave(200px; 200px; #76daff);
}
<!-- Auf der Seite aufgerufen -->
<div Klasse="wave-box"></div>