CSSを使用して円形の波効果を実現する

.wave {
        位置: 相対的; 
    幅: 200ピクセル;
    高さ: 200px;
    背景: @color;
    境界線: 5px 実線 #76daff;
    境界線の半径: 50%;
    オーバーフロー: 非表示;
}
.wave-box::before、
.wave-box::after {
      コンテンツ： '';
      位置: 絶対;
      上: 0;
      左: 50%;
      幅: 400ピクセル;
      高さ: 400px;
      境界線の半径: 45%;
      -webkit-transform: translate(-50%, -70%);
      変換: translate(-50%, -70%);
      背景: rgba(255, 255, 255, 0.5);
      -webkit-animation: 10 秒間、線形無限回転します。
      アニメーション: 10 秒の線形無限回転;
      zインデックス: 10;
}
@keyframes 回転 {
  50% {
            -webkit-transform: 変換(-50%, -75%) 回転(180度);
            変換: 移動(-50%, -75%) 回転(180度);
  }
  100% {
            -webkit-transform: 変換(-50%, -70%) 回転(180度);
            変換: 移動(-50%, -70%) 回転(180度);
  }
}
//または、プリコンパイルされた言語を使用する方が便利です。ここでは、より少ない
.wave(@width; @height; @color) {
    位置: 相対的; 
    幅: @width;
    高さ: @height;
    背景: @color;
    境界線: 5px 実線 @color;
    境界線の半径: 50%;
    オーバーフロー: 非表示;
    ＆：：前に、
    ＆：：後 {
        コンテンツ： '';
        位置: 絶対;
        上: 0;
        左: 50%;
        幅: @width * 2;
        高さ: @height * 2;
        境界線の半径: 45%;
        変換: translate(-50%, -70%);
        背景: rgba(255,255,255,0.5);
        アニメーション: 10 秒の線形無限回転;
        zインデックス: 10;
    }
    ＆：：後 {
        境界線の半径: 47%;
        背景: rgba(255,255,255,0.5);
        アニメーション: 10 秒回転、線形 -5 秒無限;
        zインデックス: 20;
    }
}
//.wave-boxを呼び出す{
    .wave(200px; 200px; #76daff);
}
<!-- ページ上で呼び出されます -->
<div class="wave-box"></div>