CSSアニメーションとSVGを組み合わせてエネルギーの流れの効果を作成する

CSSアニメーションとSVGを組み合わせてエネルギーの流れの効果を作成する

最終的な効果は次のようになります。

アニメーションは2つのステップに分かれています

  • ランニング軌道を開発する
  • DOMを作成し、パスに沿ってアニメーションする

ランニング軌道を開発する

まず、エネルギーの流れのパイプラインとして、下部に水色の半透明の道路を描く必要があります。ここでは SVG パスを使用します (実際には、ここで背景画像を直接使用できます)。コードは次のとおりです。

<!-- コードは react で書かれており、トラバーサルと一部のコードは削除されています -->

<svg>
    <!-- ツールの説明プロンプト。フィルタリングやその他の操作の塗りつぶしに使用されます。ボールの下部の輝きはここにあります -->
    <定義>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style={{ stopColor: "rgba(2,246,255,.5)" }} />
            <stop offset="100%" style={{ stopColor: "rgba(2,246,255,0)" }} />
        </放射状グラデーション>
    </defs>
    <!-- ここでは、N 本の水色の線のパス d をパスとしてトラバースします -->
    <path d={item.path} ストローク="rgba(29,159,167,0.4)" 塗りつぶし="透明" ストローク幅={5}></path>
    ...
    <!-- 2 つの円を重ねて形成された光るボールです -->
    <g>
        <circle cx={cx} cy={cy} r="15" fill="url(#grad1)"></circle>
        <circle cx={cx} cy={cy} r="5" fill="rgba(2,246,255)"></circle>
    </g>
</svg>

DOMを作成し、パスに沿ってアニメーションする

ここでの核となる原則は、 offset-path プロパティを通じてモーション オフセット パスを設定し、次に offset-distance を通じてオフセットを設定することです。これにより、要素は CSS3 アニメーションを通じて特定の軌道に沿って移動できるようになります。

<!-- ここでは、パス ポイントが一貫しているように、ボックスと SVG ボックスが同じ幅と高さで揃っていることを確認する必要があります -->
<div className={styles.animate}>
    <!-- ここでは N 個の div をトラバースし、各 div を offsetPath (SVG のパスの d の値) に従ってフローさせます -->
    <!-- 負の animationDelay はレンダリング前に実行されることを意味し、レンダリング中にパス全体をカバーできます -->
    <div key={index} className={styles.point3} style={{ "offsetPath": "path('M 105 34 L 5 34')", "animationDelay": `-${index * 1}s`, "animationDuration": '5s', 'animationPlayState': `${stop ? 'paused' : 'running'}` }}></div>
    ...
</div>
.point3 {
    幅: 10px;
    高さ: 2px;
    // オフセットパス: path('M 248 108 L 248 172 L 1510 172');
    オフセット距離: 0%;
    アニメーション: フロー 20 秒 線形 法線 無限;
    背景画像: 線形グラデーション(右へ、rgba(255, 255, 255, 0) 10%、#FEFE02);
    位置: 絶対;
    左: 0;
    右: 0;
}
}

@keyframesフロー{
    から {
        オフセット距離: 0%;
    }

    に {
        オフセット距離: 100%;
    }
}

これで、SVG で CSS アニメーションを使用してエネルギー フロー効果を作成する方法についての説明は終了です。SVG で CSS アニメーションを使用する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL の current_timestamp の落とし穴とその解決策を共有する

>>:  サーバー同時実行数の推定式と計算方法

推薦する

CSSでフレックス配置を表示する(レイアウトツール)

display: flex レイアウトに関しては、深く理解している人もいますし、私も他の人の作業か...

vue+django でファイルをダウンロードする例

目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...

MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード

序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...

MySQLカスタム関数の簡単な使用例

この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...

LinuxシステムにISOファイルをインストールする方法

Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...

MySQLのREDOログ(リドゥログ)とロールバックログ(アンドゥログ)の詳しい説明

序文:前回の記事では、MySQL システムでよく使用されるログをいくつか説明しました。実は、トランザ...

CentOS 8/RHEL 8 に Cockpit をインストールして使用する方法

Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...

Webpack3+React16コード分割の実装

プロジェクトの背景最近、webpackのバージョンが古いプロジェクトがあります。 リーダー層では今の...

クリーンなコードのための Web デザインの 12 の法則 [グラフィック]

美しいコードは美しい Web サイトの基礎です。優れた CSS は、同様に優れた HTML の上にの...

CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する

1. 問題の出現フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポッ...

Vueは完全な選択機能を実装しています

この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

MySQL 5.7.23 バージョンのインストールチュートリアルと設定方法

MySQL を自分でインストールするのに 3 時間かかりました。チュートリアルはたくさんあるにもかか...

LinuxでTomcatのポート番号を変更する方法

ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...

MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事

目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....