ダイナミックな波効果を実現するSVG+CSS3

ベクトル波

<svg viewBox="0 0 560 20" class="wave-animation__water-wave wave-animation__water-wave--front">
    <xlink:href="#wave" を使用>
</svg>
<svg id="波" 幅="100%" 高さ="100%">
    <path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
    <path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
    <path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
    <path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>

完全なコード:

<!DOCTYPE html>
<html>

<ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ">
</head>

<本文>
    <div class="circle-countdowncircle-countdown--終了">
        <div class="circle-countdown__content-wrapper">
            <div class="circle-countdown__content 波アニメーション">
                <div id="water" class="wave-animation__water">
                    <svg viewBox="0 0 560 20" class="wave-animation__water-wave wave-animation__water-wave--back">
                        <パス
                            d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z">
                        </パス>
                        <パス
                            d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z">
                        </パス>
                        <パス
                            d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z">
                        </パス>
                        <パス
                            d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z">
                        </パス>
                    </svg>
                    <svg viewBox="0 0 560 20" class="wave-animation__water-wave wave-animation__water-wave--front">
                        <パス
                            d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z">
                        </パス>
                        <パス
                            d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z">
                        </パス>
                        <パス
                            d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z">
                        </パス>
                        <パス
                            d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z">
                        </パス>
                    </svg>
                </div>
            </div>
        </div>
    </div>


    <スタイル>
        .circle-countdown {
            幅: 441ピクセル;
            高さ: 441px;
            位置: 相対的;
            上: 0;
            左: 0;
            パディング：2.5rem;
            境界線: 1px 実線 #fb64b6;
            境界線の半径: 50%;
            オーバーフロー: 非表示;
        }

        .waveアニメーション{
            オーバーフロー: 非表示;
        }


        .wave-animation__percent {
            位置: 絶対;
            左: 0;
            上: 0;
            zインデックス: 3;
            幅: 100%;
            高さ: 100%;
            ディスプレイ: フレックス;
            ディスプレイ: -webkit-flex;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
            色: #fff;
            フォントサイズ: 64px;
        }

        .wave-animation__water {
            位置: 絶対;
            左: 0;
            上: 0;
            Zインデックス: -1;
            幅: 100%;
            高さ: 100%;
            /* ここで 60% を調整すると、波の進行と高さが変わります */
            変換: translate(0, calc(100% - 60%));
            背景: #f852d6;
            遷移: すべて 2;
        }

        .wave-animation__water-wave {
            幅: 200%;
            位置: 絶対;
            下部: 100%;


        }

        .wave-animation__water-wave--back {
            右: 0;
            塗りつぶし: #1d1d1d;
            アニメーション: ウェーブバック 1.4 秒 無限線形;
        }

        .wave-animation__water-wave--front {
            左: 0;
            塗りつぶし: #f852d6;
            下マージン: -1px;
            アニメーション: 波面 0.7 秒 無限線形;
        }

        @keyframes 波面 {
            100% {
                変換: translate(-50%, 0);
            }
        }

        @keyframes ウェーブバック {
            100% {
                変換: translate(50%, 0);
            }
        }
    </スタイル>
</本文>

</html>