ダイナミックな波効果を実現する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 マスター/スレーブ ステータスを監視するシェル スクリプト

Linuxでシェルスクリプトを共有して、MySQLのマスタースレーブ状態を監視し、エンタープライズW...

Linux システムのシャットダウンコマンドの違いと使い方の詳細な説明

Linux システムのシャットダウン コマンドは何ですか? Liangxu Tutorial Net...

Apache Bench ストレステストツールの実装原理と使用状況分析

1: スループット(1秒あたりのリクエスト数)サーバーの同時処理能力を定量的に表したもので、reqs...

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

JavaScript コードベースをよりクリーンにする 5 つの方法

目次1. 短絡や条件文の代わりにデフォルトのパラメータを使用する2. 複数の条件の処理3. スイッチ...

MySQL メモリテーブルと一時テーブルの使用方法の詳細な説明

MySQL メモリ テーブルと一時テーブルの使用メモリテーブル: セッション 1 $ mysql -...

Dockerイメージストレージoverlayfsの使用

1. 概要Docker のイメージはレイヤーで設計されています。各レイヤーは「レイヤー」と呼ばれます...

CentOS8 でローカル yum ソースを構成するための詳細なチュートリアル

centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...

Dockerがコンテナを作成した後にホスト名を変更する詳細なプロセス

後悔を癒す薬は世の中にある、考えてみる気さえあれば!コンテナを再作成する必要はもうありません。 m2...

HTML でよく使用されるエスケープ文字の概要

HTML でよく使用されるエスケープ文字をまとめると次のようになります。 &nbsp; 改行...

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...

ApacheとTomcatを組み合わせて静的状態と動的状態を分離する方法

実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...

Vue での ElementUI の使用に関する詳細な説明

ログイン + セッションストレージエフェクト表示ログインに成功すると、ユーザー ID がフロントエン...

MySQL シリーズ 3 基礎

目次チュートリアルシリーズ1. MySQL の紹介2. MySQLの開発履歴3. MariaDBの基...

Docker イメージのエクスポート、インポート、コピーの例の分析

最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...