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 構成 リバース プロキシ

推薦する

awk でのループの使用

同じコマンドを複数回実行するさまざまな種類のループについて学習しましょう。 awk スクリプトには、...

5分でReactルーティングについてお教えします

目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...

親ページの更新を制御するために HTML で iframe を実装するためのアイデアとコード

1. 応用シナリオ親ページ a.jspサブページ b.jsp (ページ a に埋め込まれた ifra...

Linux で FastDFS ファイル サーバーを構築するための実装手順

目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...

MySQL 5.7.31 64 ビット無料インストール版チュートリアル図

1. ダウンロードダウンロードアドレス: https://dev.mysql.com/get/Dow...

Docker で既存のイメージに基づいて新しいイメージを構築する方法

既存のイメージから新しいイメージを構築することは、Dockerfile ドキュメントを通じて行われま...

Vue で className として空の文字列を使用することはなぜ推奨されないのですか?

目次空の文字列 '' と null を比較するケース1: 空の文字列を使用する &#...

WeChatミニプログラムのすべてのページがログインされていることを確認する方法

目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...

JavaScript で一意の ID を生成するいくつかの方法

考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...

Centos7 から Centos8 へのアップグレードに関するチュートリアル (画像とテキスト付き)

正式な環境でアップグレードする場合は、データと重要な設定をバックアップしてください。アップグレードに...

Docker 構成 Alibaba Cloud イメージアクセラレーション プル実装

今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...

最新の高品質な英語無料フォント36個を公開

01. 無限フォントのダウンロード02. バンダフォントのダウンロード03. ロールアップフォントの...

SQL 集計、グループ化、並べ替え

目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...

JavaScript の構造化代入の一般的なシナリオと例 5 つ

目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...

キーボード上の各種特殊記号の英語読み方（知識の普及）

キーボード文字英語`バッククォート〜チルダ！叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット＆...