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

ダイナミックな波効果を実現する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> 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  中国語ウェブコンテンツを紹介する10の経験

>>:  Zen Coding 簡単で素早いHTMLの書き方

推薦する

MySQLでユーザー認証情報を表示する具体的な方法

具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...

Vue.jsの機能コンポーネントに関する包括的な理解

目次序文React 関数コンポーネントVue (2.x) の機能コンポーネント🌰 例: el-tab...

vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する

VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...

Vue + 要素を使用して背景データをオプションに動的に表示する

必要:ハードコードされたデータの代わりに、セレクター内のオプション値の動的な表示を実装します。私のロ...

mysql ERROR 1045 (28000) 問題の解決方法

私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...

Ubuntuサーバーの一般的なコマンドの概要

以下のコマンドのほとんどは、コンソール/ターミナル/シェルで入力する必要があります。 'su...

MySql インデックス使用戦略の分析

MySql インデックスインデックスの利点1. 一意のインデックスまたは主キー インデックスを作成す...

プレーヤー機能を実現するためのvue + element uiのサンプルコード

効果画像のない表示は単なる空虚な言葉です。 1. オーディオをベースにし、elementUI と組み...

MySQLのあいまいクエリインデックスの失敗の問題を解決するいくつかの方法

% ワイルドカードを使用すると、インデックス失敗の問題が発生することがよくあります。ここでは、lik...

フロントエンドでよく使われるjs関数メソッド

目次1. メール2. 携帯電話番号3. 電話番号4. URLアドレスですか? 5. 文字列ですか? ...

vuexサードパーティパッケージを使用してデータの永続性を実装する方法

目的: vuex で管理されている状態データを同時にローカルに保存できるようにします。独自のストレー...

操作タイムアウトがないときにMySQLサーバーがアクティブに切断される問題を解決します

MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...

React リストバーとショッピングカートコンポーネントの使用の詳細な説明

この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...

Webpack5-react スキャフォールディングをゼロから構築するための実装手順 (ソースコード付き)

目次ウェブパック5公式スタート建築ガイド構築を開始する依存する準備が完了したら、プロジェクトの構築を...