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 ページに img 画像を導入する方法

HTMLを学ぶとき、画像タグ<img>は画像を導入します <img src=&qu...

MYSQL マスタースレーブ レプリケーションの知識ポイントの概要

単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

Nginx の負荷分散と動的および静的分離の原理と構成

目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...

JavaScript の基礎: 即時実行関数

目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...

Nginx プロキシ axios リクエストと注意事項

序文最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイス...

MySQL 5.6 マスタースレーブエラー報告の実践記録

1. 問題の症状バージョン: MySQL 5.6、従来の binlog ファイルと pos 方式を使...

JavaScript ファクトリーパターンの説明

目次シンプルファクトリーファクトリーメソッド安全な工場方法アブストラクトファクトリー要約するシンプル...

LinuxスレッドのPID（TID、LWP）を取得するいくつかの方法の詳細な説明

Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...

binlog2sql と簡単なバックアップおよびリカバリを使用して mysql8.0.20 を構成するための詳細な手順

目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...

Linux学習におけるmkdirコマンドの詳しい説明

目次序文1. ファイルの概念に関する基礎知識2. mkdir コマンド序文最近、Linux にますま...

MySql はデータを正常に挿入しますが、[Err] 1055 エラーが報告されます。解決策

1. 質問:最近、挿入操作を行っています。MySQLのバージョンは5.7です。挿入は成功しますが、エ...

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 2. クロージャの役割2.1) メモリ2.2) プライベート変数...

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...

Nginx リバース プロキシと負荷分散の実践

リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...