困難 SVG グラフィックの 2 つのマスクの作成 まず、コード 左側のピンク色のボックスの内容です これについては何も良いことは言えません。 <div id="con"> <div id="TA-con"> <div id="text-con"> <div id="linght"></div> <div id="TA">TA をチャージ</div> </div> </div> 体 { マージン: 0; パディング: 0; 背景色: #eee; } /* 白いコンテナを設定します */ #con { 幅: 350ピクセル; 高さ: 85px; 背景色: #fff; 位置: 相対的; 境界線の半径: 4px; マージン:50px 自動; } #TAコン 幅: 157ピクセル; 高さ: 50px; 背景色: #f25d8e; ボックスの影: 0 4px 4px rgba(255, 112, 159, .3); 位置: 絶対; 上位: 50%; 左: 5%; 変換: translateY(-50%); 境界線の半径: 4px; カーソル: ポインタ; } /* テキストをコンテナの中央に配置する */ #テキストコン { 幅: 100ピクセル; 高さ: 100%; マージン: 0 自動; 位置: 相対的; } /* 小さな稲妻を作る */ #リング { 幅: 0; 高さ: 0; 位置: 絶対; 上位: 36% 左: 4px; 境界線の色: 透明; 境界線のスタイル: solid; 境界線の幅: 10px; 上境界線: 10px 実線 #fff; 境界線の半径: 4px; 変換: 回転(-55度); } #linght::after { 位置: 絶対; 上: -13px; 左: -11px; コンテンツ: ""; 幅: 0; 高さ: 0; 境界線の色: 透明; 境界線のスタイル: solid; 境界線の幅: 10px; 上境界線: 10px 実線 #fff; 変換: 回転(180度); 境界線の半径: 4px; } /* 文章*/ #TA { フロート: 右; 行の高さ: 50px; フォントサイズ: 15px; 色: #fff; } #TA-con:ホバー{ 背景色: #ff6b9a; } ここで行っているのは、灰色の背景を持つ SVG グラフィックを作成することです。見た目は複雑で多そうですが、心配しないでください。私が書いたわけではありません。 <div id="tube-con"> <svg viewBox="0 0 1028 385" 塗りつぶし="なし" xmlns="http://www.w3.org/2000/svg"> <path d="M1 77H234.226L307.006 24H790" ストローク="#e5e9ef" ストローク幅="20" /> <path d="M0 140H233.035L329.72 71H1028" ストローク="#e5e9ef" ストローク幅="20" /> <path d="M1 255H234.226L307.006 307H790" ストローク="#e5e9ef" ストローク幅="20" /> <path d="M0 305H233.035L329.72 375H1028" ストローク="#e5e9ef" ストローク幅="20" /> <rect y="186" width="236" height="24" fill="#e5e9ef" /> <楕円 cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" /> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" /> <楕円 cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" /> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" /> </svg> 使ったのはこれ、ウェブ版がオンラインになっています。描いたら右クリックでコードをコピーできます。簡単ですね! www.figma.com/ SVGの描画が準備できたので、それをどのように完成させるかを考える必要があります。 必要なもの: 灰色の背景は準備ができていますが、ピンクと黄色の SVG 画像がありません。 マスクはピンクのSVGマスクを作成するために使用されます <div id="マスク"> グレーのSVGとの違いはありません。色を変えるだけです。 <svg viewBox="0 0 1028 385" 塗りつぶし="なし" xmlns="http://www.w3.org/2000/svg"> <path d="M1 77H234.226L307.006 24H790" ストローク="#f25d8e" ストローク幅="20" /> <path d="M0 140H233.035L329.72 71H1028" ストローク="#f25d8e" ストローク幅="20" /> <path d="M1 255H234.226L307.006 307H790" ストローク="#f25d8e" ストローク幅="20" /> <path d="M0 305H233.035L329.72 375H1028" ストローク="#f25d8e" ストローク幅="20" /> <rect y="186" 幅="236" 高さ="24" 塗りつぶし="#f25d8e" /> <楕円 cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" /> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" /> <楕円 cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" /> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" /> </svg> </div> orange-mask は黄色の SVG のマスクを作成するために使用されます。 <div id="オレンジマスク" > グレーのSVGとの違いはありません。色を変えるだけです。 <svg viewBox="0 0 1028 385" 塗りつぶし="なし" xmlns="http://www.w3.org/2000/svg"> <path d="M1 77H234.226L307.006 24H790" ストローク="#ffd52b" ストローク幅="20" /> <path d="M0 140H233.035L329.72 71H1028" ストローク="#ffd52b" ストローク幅="20" /> <path d="M1 255H234.226L307.006 307H790" ストローク="#ffd52b" ストローク幅="20" /> <path d="M0 305H233.035L329.72 375H1028" ストローク="#ffd52b" ストローク幅="20" /> <rect y="186" width="236" height="24" fill="#ffd52b" /> <楕円 cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" /> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" /> <楕円 cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" /> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" /> </svg> </div> <p id="people">合計 <b>0</b> 人</p> </div> </div> CSSコード /* グラフィックコンテナを作成する */ #チューブコン{ 幅: 157ピクセル; 高さ: 55px; 位置: 絶対; 右: -5px; 上: 15px; } /* svg グラフィックの幅と高さを設定します*/ svg { 幅: 100%; 高さ: 100%; } /* 幅 0 のマスクを作成します。充電ボックスにマウスを移動すると、幅が広がります */ #マスク { 幅: 0px; 高さ: 100%; オーバーフロー: 非表示; 位置: 絶対; 上: 0; 左: 0; 遷移:すべて 0.5 秒; } /* マスクされた sbg の幅と高さを別々に設定して、幅と高さがパーセンテージではなく固定値になるようにします */ #マスクsvg{ 幅: 157ピクセル; 高さ: 55px; } /* 充電フレームにマウスを移動するとアニメーションが開始され、ピンクの線が広がります*/ #TA-con:hover+#tube-con>#mask{ 幅:157ピクセル; } /* 充電フレームにマウスを置いたときにアニメーションを開始し、黄色の高速アニメーションを追加します*/ #TA-con:hover+#tube-con>#orange-mask{ アニメーション: move1 0.5秒線形 0.2秒無限; } #TA-con:hover+#tube-con>#orange-mask svg{ アニメーション: movetwo 0.5s linear 0.2s infinite; } /* 黄色の動くマスクを作成する */ #オレンジマスク{ 幅: 18px; 高さ: 100%; オーバーフロー: 非表示; 位置:絶対; 左:-15px; 上:0px; } /* 黄色の動くコンテンツを作成する */ #オレンジマスク svg { 位置: 絶対; トップ:0; 左:15px; 幅: 157ピクセル; 高さ: 55px; } @keyframes 移動1 { 0%{ 左:-15px; } 100%{ 左:140px; } } @keyframes を2つ移動します { 0%{ 左:15px; } 100%{ 左:-140px; } } #人々{ 位置:絶対; 右:10px; 上:8px; フォントサイズ:12px; フォントファミリー:"YaHei"; 色:#aaa; } #人>b{ 色:#777; } CSS 処理で最も難しい部分は、黄色の SVG と黄色の SVG マスクです。 黄色の SVG マスクが左から右に移動し、黄色の SVG の位置が変更されないようにする必要があるためです。 move1 は親要素のマスク、movetwo は黄色の SVG グラフィックです。名前については文句を言わないでください。 。 。 。 move1がどれだけ移動するか、movetwoが反対の距離を移動するか @keyframes 移動1 { 0%{ 左:-15px; } 100%{ 左:140px; } } @keyframes を2つ移動します { 0%{ 左:15px; } 100%{ 左:-140px; } } すべてのコード <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> 体 { マージン: 0; パディング: 0; 背景色: #eee; } /* 白いコンテナを設定します */ #con { 幅: 350ピクセル; 高さ: 85px; 背景色: #fff; 位置: 相対的; 境界線の半径: 4px; マージン:50px 自動; } /* テキストコンテンツコンテナを設定する */ #TAコン 幅: 157ピクセル; 高さ: 50px; 背景色: #f25d8e; ボックスの影: 0 4px 4px rgba(255, 112, 159, .3); 位置: 絶対; 上位: 50%; 左: 5%; 変換: translateY(-50%); 境界線の半径: 4px; カーソル: ポインタ; } /* テキストをコンテナの中央に配置する */ #テキストコン { 幅: 100ピクセル; 高さ: 100%; マージン: 0 自動; 位置: 相対的; } /* 小さな稲妻を作る */ #リング { 幅: 0; 高さ: 0; 位置: 絶対; 上位: 36% 左: 4px; 境界線の色: 透明; 境界線のスタイル: solid; 境界線の幅: 10px; 上境界線: 10px 実線 #fff; 境界線の半径: 4px; 変換: 回転(-55度); } #linght::after { 位置: 絶対; 上: -13px; 左: -11px; コンテンツ: ""; 幅: 0; 高さ: 0; 境界線の色: 透明; 境界線のスタイル: solid; 境界線の幅: 10px; 上境界線: 10px 実線 #fff; 変換: 回転(180度); 境界線の半径: 4px; } /* 文章*/ #TA { フロート: 右; 行の高さ: 50px; フォントサイズ: 15px; 色: #fff; } #TA-con:ホバー{ 背景色: #ff6b9a; } /* グラフィックコンテナを作成する */ #チューブコン { 幅: 157ピクセル; 高さ: 55px; 位置: 絶対; 右: -5px; 上: 15px; } /* svg グラフィックの幅と高さを設定します*/ svg { 幅: 100%; 高さ: 100%; } /* 幅 0 のマスクを作成します。充電ボックスにマウスを移動すると、幅が広がります */ #マスク { 幅: 0px; 高さ: 100%; オーバーフロー: 非表示; 位置: 絶対; 上: 0; 左: 0; 遷移:すべて 0.5 秒; } /* マスクされた sbg の幅と高さを別々に設定して、幅と高さがパーセンテージではなく固定値になるようにします */ #マスクsvg{ 幅: 157ピクセル; 高さ: 55px; } /* 充電フレームにマウスを移動するとアニメーションが開始され、ピンクの線が広がります*/ #TA-con:hover+#tube-con>#mask{ 幅:157ピクセル; } /* 充電フレームにカーソルを合わせるとアニメーションを開始し、黄色の高速アニメーションを追加します*/ #TA-con:hover+#tube-con>#orange-mask{ アニメーション: move1 0.5秒線形 0.2秒無限; } #TA-con:hover+#tube-con>#orange-mask svg{ アニメーション: movetwo 0.5s linear 0.2s infinite; } /* 黄色の動くマスクを作成する */ #オレンジマスク{ 幅: 18px; 高さ: 100%; オーバーフロー: 非表示; 位置:絶対; 左:-15px; 上:0px; } /* 黄色の動くコンテンツを作成する */ #オレンジマスク svg { 位置: 絶対; トップ:0; 左:15px; 幅: 157ピクセル; 高さ: 55px; } @keyframes 移動1 { 0%{ 左:-15px; } 100%{ 左:140px; } } @keyframes を2つ移動します { 0%{ 左:15px; } 100%{ 左:-140px; } } #人々{ 位置:絶対; 右:10px; 上:8px; フォントサイズ:12px; フォントファミリー:"YaHei"; 色:#aaa; } #人>b{ 色:#777; } </スタイル> </head> <本文> <div id="con"> <div id="TA-con"> <div id="text-con"> <div id="linght"></div> <div id="TA">TA をチャージ</div> </div> </div> <div id="tube-con"> <svg viewBox="0 0 1028 385" 塗りつぶし="なし" xmlns="http://www.w3.org/2000/svg"> <path d="M1 77H234.226L307.006 24H790" ストローク="#e5e9ef" ストローク幅="20" /> <path d="M0 140H233.035L329.72 71H1028" ストローク="#e5e9ef" ストローク幅="20" /> <path d="M1 255H234.226L307.006 307H790" ストローク="#e5e9ef" ストローク幅="20" /> <path d="M0 305H233.035L329.72 375H1028" ストローク="#e5e9ef" ストローク幅="20" /> <rect y="186" width="236" height="24" fill="#e5e9ef" /> <楕円 cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" /> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" /> <楕円 cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" /> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" /> </svg> <div id="マスク"> <svg viewBox="0 0 1028 385" 塗りつぶし="なし" xmlns="http://www.w3.org/2000/svg"> <path d="M1 77H234.226L307.006 24H790" ストローク="#f25d8e" ストローク幅="20" /> <path d="M0 140H233.035L329.72 71H1028" ストローク="#f25d8e" ストローク幅="20" /> <path d="M1 255H234.226L307.006 307H790" ストローク="#f25d8e" ストローク幅="20" /> <path d="M0 305H233.035L329.72 375H1028" ストローク="#f25d8e" ストローク幅="20" /> <rect y="186" 幅="236" 高さ="24" 塗りつぶし="#f25d8e" /> <楕円 cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" /> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" /> <楕円 cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" /> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" /> </svg> </div> <div id="オレンジマスク" > <svg viewBox="0 0 1028 385" 塗りつぶし="なし" xmlns="http://www.w3.org/2000/svg"> <path d="M1 77H234.226L307.006 24H790" ストローク="#ffd52b" ストローク幅="20" /> <path d="M0 140H233.035L329.72 71H1028" ストローク="#ffd52b" ストローク幅="20" /> <path d="M1 255H234.226L307.006 307H790" ストローク="#ffd52b" ストローク幅="20" /> <path d="M0 305H233.035L329.72 375H1028" ストローク="#ffd52b" ストローク幅="20" /> <rect y="186" width="236" height="24" fill="#ffd52b" /> <楕円 cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" /> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" /> <楕円 cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" /> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" /> </svg> </div> <p id="people">合計 <b>0</b> 人</p> </div> </div> </本文> </html> CSS+SVGを使用してBステーションの充電効果を実現するサンプルコードに関するこの記事はこれで終わりです。より関連性の高いCSS Bステーションの充電コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。 |
<<: テキストエリアのテキスト入力領域に改行を実装する方法
>>: JS クロスドメイン ソリューション React 構成 リバース プロキシ
目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...
この投稿では、キャンバスとドラッグ可能なノード インターフェースを使用するデスクトップおよび Web...
1.Mysql接続方法MySQL 通信プロトコルを理解するには、まず MySQL サーバーへの接続に...
最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...
目次LocalStorageとはSessionStorageとはLocalStorage と Ses...
1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...
MySQL 認証コマンド grant の使用方法:この記事の例は MySQL 5.0 以降で実行され...
本日は、色彩の応用に関する優れた事例を 30 件集めて、皆さんにご紹介したいと思います。これらの事例...
InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...
元の派生コマンド: bin/sqoop インポート -connect jdbc:mysql://19...
ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...
私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...
1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....
エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...
目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...