CSS+SVGでBステーションの課金効果を実現するサンプルコード

CSS+SVGでBステーションの課金効果を実現するサンプルコード

困難

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の描画が準備できたので、それをどのように完成させるかを考える必要があります。

必要なもの:
1: 背景色がグレーの SVG 画像。
2: ピンク色の SVG 画像。マウスを左側のピンク色のボックスに移動すると、ピンク色の SVG 画像が完全に拡大され、初期値は 0 になります。
3: 素早く移動する小さな黄色の四角形。

灰色の背景は準備ができていますが、ピンクと黄色の 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 の位置が変更されないようにする必要があるためです。
マスクは親要素であり、黄色の 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 構成 リバース プロキシ

推薦する

VUE ユニアプリライフサイクルに関する簡単な説明

目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...

Flutterを使用して移動可能なスタックウィジェット機能を作成する

この投稿では、キャンバスとドラッグ可能なノード インターフェースを使用するデスクトップおよび Web...

Mysql通信プロトコルの詳細な説明

1.Mysql接続方法MySQL 通信プロトコルを理解するには、まず MySQL サーバーへの接続に...

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...

Vue における LocalStorage と SessionStorage の違いと使い方

目次LocalStorageとはSessionStorageとはLocalStorage と Ses...

ウェブページ作成における絶対パスと相対パスの違い

1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...

MySQLの認可コマンド grant の使い方のまとめ

MySQL 認証コマンド grant の使用方法:この記事の例は MySQL 5.0 以降で実行され...

ウェブデザインにおけるカラーマッチングの優れた例30選

本日は、色彩の応用に関する優れた事例を 30 件集めて、皆さんにご紹介したいと思います。これらの事例...

InnoDB エンジンの redo ファイルのメンテナンス方法

InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...

MySQLからHiveにさらにデータをインポートするためのソリューション

元の派生コマンド: bin/sqoop インポート -connect jdbc:mysql://19...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

IE ラベル LI テキスト折り返し問題について

私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

MySQL データをエクスポートする際の secure-file-priv 問題の解決方法

エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法（インターフェースを通じてデータを取得し、それをローカル ...