Beispiel für die Implementierung von QR-Code-Scaneffekten mit CSS3

Online-Vorschau

https://jsrun.pro/AafKp/

Erster Blick auf die Wirkung:

Der erste Schritt besteht darin, den Gitterhintergrund zu realisieren:

Hintergrundbild:
    linearer Gradient (0 Grad,
    transparent 24%,
    rgba(32, 255, 77, 0.1) 25%,
    rgba(32, 255, 77, 0.1) 26%,
    transparent 27%,
    transparent 74%,
    rgba(32, 255, 77, 0.1) 75%,
    rgba(32, 255, 77, 0,1) 76%,
    transparent 77%,
    transparent),
    linearer Gradient (90 Grad,
    transparent 24%,
    rgba(32, 255, 77, 0.1) 25%,
    rgba(32, 255, 77, 0.1) 26%,
    transparent 27%,
    transparent 74%,
    rgba(32, 255, 77, 0.1) 75%,
    rgba(32, 255, 77, 0,1) 76%,
    transparent 77%,
    transparent);
Hintergrundgröße: 3rem 3rem;
Hintergrundposition: -1rem -1rem;

Der zweite Schritt realisiert die Scanlinie und die Gradienten-Hintergrundeffekte

Hintergrund: linearer Farbverlauf (180 Grad, RGBA (0, 255, 51, 0) 50 %, #00ff33 300 %);
Rahmen unten: 2px durchgezogen #00ff33;

Vier Eckeffekte

Es handelt sich dabei um vier Quadrate gleicher Breite und Höhe, und Sie können für jedes davon einen Rahmen festlegen.

Einrichten einer Scan-Animation

@keyframes Radarstrahl {  
    0% {  
        transformieren: übersetzenY(-110%);  
  }  
  
    100 % {  
        transformieren: übersetzenY(120%);  
  }  
}

Vollständiger Code:

<!DOCTYPE html>
<html>

<Kopf>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1">
    <Titel>css3-scanner.html</Titel>
    <Stil>
    html,
    Körper {
        Höhe: 100%;
        Rand: 0;
    }

    .qr-scanner {
        Hintergrundbild:
            linearer Gradient (0 Grad,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0,1) 76%,
            transparent 77%,
            transparent),
            linearer Gradient (90 Grad,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0,1) 76%,
            transparent 77%,
            transparent);
        Hintergrundgröße: 3rem 3rem;
        Hintergrundposition: -1rem -1rem;
        Breite: 100 %;
        Höhe: 100%;
        Position: relativ;
        Hintergrundfarbe: #111;
    }

    .qr-scanner .box {
        Breite: 75vw;
        Höhe: 75vw;
        max. Höhe: 75vh;
        max. Breite: 75vh;
        Position: relativ;
        links: 50%;
        oben: 50 %;
        transformieren: übersetzen(-50 %, -50 %);
        Überlauf: versteckt;
        Rand: 0,1rem durchgezogen rgba(0, 255, 51, 0,2);
    }

    .qr-scanner .line {
        Höhe: berechnet (100 % – 2 Pixel);
        Breite: 100 %;
        Hintergrund: linearer Farbverlauf (180 Grad, RGBA (0, 255, 51, 0) 43 %, #00ff33 211 %);
        Rahmen unten: 3px durchgezogen #00ff33;
        transformieren: verschiebeY(-100%);
        Animation: Radarstrahl 2s unendlich;
        Animations-Timing-Funktion: kubische Bézierkurve (0,53, 0, 0,43, 0,99);
        Animationsverzögerung: 1,4 s;
    }

    .qr-scanner .box:nach,
    .qr-scanner .box:vorher,
    .qr-scanner .angle:nach,
    .qr-scanner .angle:vor {
        Inhalt: '';
        Anzeige: Block;
        Position: absolut;
        Breite: 3vw;
        Höhe: 3vw;

        Rand: 0,2rem durchgehend transparent;
    }

    .qr-scanner .box:nach,
    .qr-scanner .box:vor {
        oben: 0;
        Rahmenfarbe oben: #00ff33;
    }

    .qr-scanner .angle:nach,
    .qr-scanner .angle:vor {
        unten: 0;
        Farbe des unteren Rahmens: #00ff33;
    }

    .qr-scanner .box:vorher,
    .qr-scanner .angle:vor {
        links: 0;
        Rahmenfarbe links: #00ff33;
    }

    .qr-scanner .box:nach,
    .qr-scanner .angle:nach {
        rechts: 0;
        Rahmenfarbe rechts: #00ff33;
    }

    @keyframes Radarstrahl {
        0% {
            transformieren: verschiebeY(-100%);
        }

        100 % {
            transformieren: übersetzenY(0);
        }
    }
    </Stil>
</Kopf>

<Text>
    <div Klasse="QR-Scanner">
        <div Klasse="Box">
            <div Klasse="Zeile"></div>
            <div Klasse="Winkel"></div>
        </div>
    </div>
</body>
</html>

Oben sind die Einzelheiten des Beispiels für die Verwendung von CSS3 zur Implementierung von Spezialeffekten beim Scannen von QR-Codes aufgeführt. Weitere Informationen zu Spezialeffekten beim Scannen von QR-Codes in CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<: JavaScript-Datenübertragung zwischen verschiedenen Seiten (URL-Parametererfassung)

>>: Detaillierte Erläuterung der kostenlosen AWS-Serveranwendung und des Tutorials zur Einrichtung eines Netzwerkproxys