CSS3 で QR コードスキャン効果を実装する例

オンラインプレビュー

https://jsrun.pro/AafKp/

まず効果を見てみましょう:

最初のステップは、グリッドの背景を実現することです。

背景画像:
    線形勾配(0度,
    透明 24%、
    RGBA(32, 255, 77, 0.1) 25%,
    RGBA(32, 255, 77, 0.1) 26%,
    透明 27%、
    透明度74%、
    RGBA(32, 255, 77, 0.1) 75%,
    RGBA(32, 255, 77, 0.1) 76%,
    透明度77%、
    透明）、
    線形勾配(90度、
    透明 24%、
    RGBA(32, 255, 77, 0.1) 25%,
    RGBA(32, 255, 77, 0.1) 26%,
    透明 27%、
    透明度74%、
    RGBA(32, 255, 77, 0.1) 75%,
    RGBA(32, 255, 77, 0.1) 76%,
    透明度77%、
    透明）;
背景サイズ: 3rem 3rem;
背景位置: -1rem -1rem;

2番目のステップでは、走査線とグラデーション背景効果を実現します。

背景: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
下境界線: 2px 実線 #00ff33;

4つのコーナー効果

幅と高さが等しい 4 つの正方形があり、それぞれに境界線を設定できます。

スキャンアニメーションを設定する

@keyframes レーダービーム {  
    0% {  
        変換: translateY(-110%);  
  }  
  
    100% {  
        変換: translateY(120%);  
  }  
}

完全なコード:

<!DOCTYPE html>
<html>

<ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
    <title>css3-scanner.html</title>
    <スタイル>
    html,
    体 {
        高さ: 100%;
        マージン: 0;
    }

    .qrスキャナー{
        背景画像:
            線形勾配(0度,
            透明 24%、
            RGBA(32, 255, 77, 0.1) 25%,
            RGBA(32, 255, 77, 0.1) 26%,
            透明 27%、
            透明度74%、
            RGBA(32, 255, 77, 0.1) 75%,
            RGBA(32, 255, 77, 0.1) 76%,
            透明度77%、
            透明）、
            線形勾配(90度、
            透明 24%、
            RGBA(32, 255, 77, 0.1) 25%,
            RGBA(32, 255, 77, 0.1) 26%,
            透明 27%、
            透明度74%、
            RGBA(32, 255, 77, 0.1) 75%,
            RGBA(32, 255, 77, 0.1) 76%,
            透明度77%、
            透明）;
        背景サイズ: 3rem 3rem;
        背景位置: -1rem -1rem;
        幅: 100%;
        高さ: 100%;
        位置: 相対的;
        背景色: #111;
    }

    .qr-スキャナー .box {
        幅：75vw;
        高さ：75vw;
        最大高さ: 75vh;
        最大幅: 75vh;
        位置: 相対的;
        左: 50%;
        上位: 50%;
        変換: translate(-50%, -50%);
        オーバーフロー: 非表示;
        境界線: 0.1rem実線rgba(0, 255, 51, 0.2);
    }

    .qr-スキャナー .line {
        高さ: calc(100% - 2px);
        幅: 100%;
        背景: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
        下境界線: 3px 実線 #00ff33;
        変換: translateY(-100%);
        アニメーション: レーダービーム 2s 無限;
        アニメーションタイミング関数: 立方ベジェ(0.53, 0, 0.43, 0.99);
        アニメーション遅延: 1.4秒;
    }

    .qr-scanner .box:after、
    .qr-scanner .box:before,
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
        コンテンツ： '';
        表示: ブロック;
        位置: 絶対;
        幅: 3vw;
        高さ: 3vw;

        境界線: 0.2rem 透明実線;
    }

    .qr-scanner .box:after、
    .qr-スキャナー .box:before {
        上: 0;
        上の境界線の色: #00ff33;
    }

    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
        下部: 0;
        境界線下部の色: #00ff33;
    }

    .qr-scanner .box:before,
    .qr-scanner .angle:before {
        左: 0;
        左境界線の色: #00ff33;
    }

    .qr-scanner .box:after、
    .qr-scanner .angle:after {
        右: 0;
        右境界線の色: #00ff33;
    }

    @keyframes レーダービーム {
        0% {
            変換: translateY(-100%);
        }

        100% {
            変換: translateY(0);
        }
    }
    </スタイル>
</head>

<本文>
    <div class="qr-scanner">
        <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
        </div>
    </div>
</本文>
</html>

上記は、CSS3 を使用して QR コードスキャン特殊効果を実装する例の詳細です。CSS3 QR コードスキャン特殊効果の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<: 異なるページ間のJavaScriptデータ転送（URLパラメータ取得）

>>: HTMLおよびJSPページがキャッシュされ、Webサーバーから再取得されるのを防ぎます。