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 ファイルの破損を修復する手順