CSS3 レーダースキャンマップのサンプルコード

CSS3 を使用して、クールなレーダースキャン画像を実現します。

ここに画像の説明を挿入

コード上で直接:

// インデックス.html
<!DOCTYPE html>
<html>

<ヘッド>
    <メタ文字セット="UTF-8">
    <title>レーダースキャン画像</title>

    <link rel="スタイルシート" href="css/index.css">

</head>

<本文>

    <div class="レーダー"></div>

</本文>

</html>

//インデックス.css
* {
    ボックスのサイズ: 境界線ボックス;
}

html{
    高さ: 100%;
    背景色: #111;
    フォントサイズ: 10px;
}


体 {
    背景画像:
        線形グラデーション(0度、透明24%、RGBA(32, 255, 77, 0.15) 26%、透明27%、透明74%、RGBA(32, 255, 77, 0.15) 76%、透明77%、透明)、
        linear-gradient(90度、透明24%、rgba(32, 255, 77, 0.15) 26%、透明27%、透明74%、rgba(32, 255, 77, 0.15) 76%、透明77%、透明);
    背景サイズ: 8rem 8rem;
    幅: 100%;
    高さ: 100%;
    位置: 相対的;
    パディング: 0;
    マージン: 0;
    フォントサイズ: 1.6rem;
}

.レーダー{
    背景：
        -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%),
        -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%、rgba(32, 255, 77, 0) 18%、#20ff4d 18.6%、rgba(32, 255, 77, 0) 18.9%)、
        -webkit-linear-gradient(90度、rgba(32、255、77、0) 49.5%、#20ff4d 50%、rgba(32、255、77、0) 50.2%)、
        -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
    幅：75vw;
    高さ：75vw;
    最大高さ: 75vh;
    最大幅: 75vh;
    位置: 相対的;
    左: 50%;
    上位: 50%;
    /* 要素を中央に配置する */
    変換: translate(-50%, -50%);
    境界線の半径: 50%;
    境界線: 0.2rem 実線 #20ff4d;
    オーバーフロー: 非表示;
}

.radar:before {
    コンテンツ： ' ';
    表示: ブロック;
    位置: 絶対;
    幅: 100%;
    高さ: 100%;
    境界線の半径: 50%;
    アニメーション: ブリップ 5 秒 無限;
    アニメーションタイミング関数: linear;
    アニメーション遅延: 1.4秒;
}

.radar:after {
    コンテンツ： ' ';
    表示: ブロック;
    背景画像: 線形グラデーション(44度、rgba(0、255、51、0) 50%、#00ff33 100%);
    幅: 50%;
    高さ: 50%;
    位置: 絶対;
    上: 0;
    左: 0;
    アニメーション: レーダービーム 5 秒 無限;
    /*同じ速度*/
    アニメーションタイミング関数: linear;
    transform-origin: 右下;
    境界線の半径: 100% 0 0 0;
}

@keyframes レーダービーム {
    0% {
        変換: 回転(0度);
    }

    100% {
        変換: 回転(360度);
    }
}

@keyframes ブリップ {
  14% {
    背景: 放射状グラデーション(2vmin 円 75% 70%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%);
  }

  14.0002%
    背景: 放射状グラデーション(2vmin 円 75% 70%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%)、放射状グラデーション(2vmin 円 63% 72%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%);
  }

  25% {
    背景: 放射状グラデーション(2vmin 円 75% 70%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%)、放射状グラデーション(2vmin 円 63% 72%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%)、放射状グラデーション(2vmin 円 56% 86%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%);
  }

  26% {
    背景: 放射状グラデーション(2vmin 円 75% 70%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%)、放射状グラデーション(2vmin 円 63% 72%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%)、放射状グラデーション(2vmin 円 56% 86%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%);
    不透明度: 1;
  }

  100% {
    背景: 放射状グラデーション(2vmin 円 75% 70%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%)、放射状グラデーション(2vmin 円 63% 72%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%)、放射状グラデーション(2vmin 円 56% 86%、#ffffff 10%、#20ff4d 30%、rgba(255, 255, 255, 0) 100%);
    不透明度: 0;
  }
}

追記: https://www.html5tricks.com/pure-css3-radar-scanning.html から転載

要約する

CSS3 でレーダースキャン画像を実装するサンプルコードに関するこの記事はこれで終わりです。CSS3 レーダースキャン画像に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTMLデザインパターンの日々の勉強ノート

>>: Dockerのプロセスとイメージを実行するための基本コマンドの詳細な説明