最終的な効果は次のようになります。 アニメーションは2つのステップに分かれています
ランニング軌道を開発する まず、エネルギーの流れのパイプラインとして、下部に水色の半透明の道路を描く必要があります。ここでは 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 の落とし穴とその解決策を共有する
display: flex レイアウトに関しては、深く理解している人もいますし、私も他の人の作業か...
目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...
Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...
必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...
序文:前回の記事では、MySQL システムでよく使用されるログをいくつか説明しました。実は、トランザ...
Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...
プロジェクトの背景最近、webpackのバージョンが古いプロジェクトがあります。 リーダー層では今の...
美しいコードは美しい Web サイトの基礎です。優れた CSS は、同様に優れた HTML の上にの...
1. 問題の出現フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポッ...
この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
MySQL を自分でインストールするのに 3 時間かかりました。チュートリアルはたくさんあるにもかか...
ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...
目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....