CSS を使用してデータ ホットスポット効果を実現する方法

CSS を使用してデータ ホットスポット効果を実現する方法

効果は以下のとおりです。

ここに画像の説明を挿入

分析する

1. ここでは、点を囲む 3 つの円がズームアニメーションを実行しているのがわかります。

4つの四角い点と3つの円を書きます

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        。市 {
            幅: 200ピクセル;
            高さ: 200px;
            背景色: グレー;
            位置: 相対的;
        }
        
        .pul {
            幅: 8px;
            高さ: 8px;
            背景色: #09f;
            境界線の半径: 50%;
            上: 0;
            下部: 0;
            左: 0;
            右: 0;
            マージン: 自動;
            位置: 絶対;
        }
        /* クラス名が pul で始まる属性を選択*/
        
        .city div[class^="pul"] {
            /* 中心 */
            上: 0;
            下部: 0;
            左: 0;
            右: 0;
            マージン: 自動;
            位置: 絶対;
            幅: 8px;
            高さ: 8px;
            境界線の半径: 50%;
            ボックスの影: 0px 0px 10px #09f;
        }
    </スタイル>
</head>

<本文>
    <div class="city">
        <div class="pul"></div>
        <div class="pul1"></div>
        <div class="pul2"></div>
        <div class="pul3"></div>
    </div>
</本文>

</html> 

ここに画像の説明を挿入

記述後、3 つの円にズーム アニメーションを追加する必要がありますが、3 つの円が同時にアニメーションをトリガーしないことがわかります。そのため、アニメーションを定義するには、3 つの円に異なる遅延時間を設定する必要があります。

/*アニメーションを定義する*/
  @keyframes プル {
            0% {}
            50% {
                幅: 20px;
                高さ: 20px;
                不透明度: 1;

            }

            100% {
                幅: 50px;
                高さ: 50px;
                不透明度: 0;
            }
        }

アニメーションの使用

.city>div:n番目の子(2) {
            アニメーション: pul 2s .5s 線形無限;
        }
        
        .city>div:n番目の子(3) {
            アニメーション: pul 2s 1s 線形無限;
        }
        
        .city>div:n番目の子(4) {
            アニメーション: pul 2s 1.5s 線形無限;
        }

効果は以下のとおりです。

ここに画像の説明を挿入

背景画像は自分で探せばあると思うので、ここには載せません。ダウンロードにはお金がかかります。

CSS を使用してデータ ホットスポット効果を実現する方法については、これで終わりです。CSS データ ホットスポットに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後も 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Reactスロットの使い方

>>:  Linux システムで grub.cfg ファイルの破損を修復する手順

推薦する

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

dockerでlnmp環境を構築する方法

プロジェクトディレクトリを作成する php ディレクトリをコピーする次のプロジェクト構造を作成します...

モバイルデバイスにおける適応レイアウトの問題に関する簡単な説明 (レスポンシブ、rem/em、Js ダイナミクス)

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイ...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

VUE レンダリング機能の使い方と詳細な説明

目次序文レンダリングの役割レンダリング機能の説明レンダリングとテンプレートの違いレンダリング例要約す...

iframeを指すaタグのターゲットの名前とIDの違い

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

CSSメディアクエリのアスペクト比を小さくする方法

CSS メディア クエリには非常に便利なアスペクト比、aspect-ratio があり、幅と高さを直...

MySQL インデックスの種類 (通常、ユニーク、フルテキスト) の説明

MySQL のインデックスの種類には、通常のインデックス、一意のインデックス、全文インデックスがあり...

Linux システムで時間を取得して使用する方法

Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...

Windows で MySQL のルート パスワードをリセットする方法

今日、WordPress がデータベースに接続できないことがわかりました。ウィンドウ サーバーにログ...

Docker: /etc/default/docker の DOCKER_OPTS パラメータを変更しても反映されない

デフォルトでは、 /etc/default/docker 設定は有効になりません。docker 環境...

データバインディングとリストデータの表示にはVue3を使用する

目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...

MySQL ログトリガー実装コード

SQL文 ドロップトリガー もし sys_menu_edit が存在します。 各行のsys_menu...

MySQL のレイテンシ問題とデータフラッシュ戦略プロセスの分析

目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...