CSS3-Radarscan-Kartenbeispielcode

Verwenden Sie CSS3, um coole Radar-Scan-Bilder zu erstellen:

Bildbeschreibung hier einfügen

Direkt zum Code:

// index.html
<!DOCTYPE html>
<html>

<Kopf>
    <meta charset="UTF-8">
    <title>Radarscan-Bild</title>

    <link rel="stylesheet" href="css/index.css">

</Kopf>

<Text>

    <div Klasse="Radar"></div>

</body>

</html>

//index.css
* {
    Box-Größe: Rahmenbox;
}

html {
    Höhe: 100%;
    Hintergrundfarbe: #111;
    Schriftgröße: 10px;
}


Körper {
    Hintergrundbild:
        linearer Farbverlauf (0 Grad, transparent 24 %, rgba (32, 255, 77, 0,15) 26 %, transparent 27 %, transparent 74 %, rgba (32, 255, 77, 0,15) 76 %, transparent 77 %, transparent),
        linearer Farbverlauf (90 Grad, transparent 24 %, rgba (32, 255, 77, 0,15) 26 %, transparent 27 %, transparent 74 %, rgba (32, 255, 77, 0,15) 76 %, transparent 77 %, transparent);
    Hintergrundgröße: 8rem 8rem;
    Breite: 100 %;
    Höhe: 100%;
    Position: relativ;
    Polsterung: 0;
    Rand: 0;
    Schriftgröße: 1,6rem;
}

.radar {
    Hintergrund:
        -webkit-radial-gradient(Mitte, 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 Grad, rgba(32, 255, 77, 0) 49,5 %, #20ff4d 50 %, rgba(32, 255, 77, 0) 50,2 %),
        -webkit-linear-gradient(0 Grad, rgba(32, 255, 77, 0) 49,5 %, #20ff4d 50 %, rgba(32, 255, 77, 0) 50,2 %);
    Breite: 75vw;
    Höhe: 75vw;
    max. Höhe: 75vh;
    max. Breite: 75vh;
    Position: relativ;
    links: 50%;
    oben: 50 %;
    /* Element zentrieren */
    transformieren: übersetzen(-50 %, -50 %);
    Randradius: 50 %;
    Rand: 0,2rem durchgezogen #20ff4d;
    Überlauf: versteckt;
}

.radar:vor {
    Inhalt: ' ';
    Anzeige: Block;
    Position: absolut;
    Breite: 100 %;
    Höhe: 100%;
    Randradius: 50 %;
    Animation: Blips 5 s unendlich;
    Animations-Timing-Funktion: linear;
    Animationsverzögerung: 1,4 s;
}

.radar:nach {
    Inhalt: ' ';
    Anzeige: Block;
    Hintergrundbild: linearer Farbverlauf (44 Grad, RGBA (0, 255, 51, 0) 50 %, #00ff33 100 %);
    Breite: 50%;
    Höhe: 50%;
    Position: absolut;
    oben: 0;
    links: 0;
    Animation: Radarstrahl 5s unendlich;
    /*gleiche Geschwindigkeit*/
    Animations-Timing-Funktion: linear;
    Transform-Origin: unten rechts;
    Randradius: 100 % 0 0 0;
}

@keyframes Radarstrahl {
    0% {
        transformieren: drehen (0 Grad);
    }

    100 % {
        transformieren: drehen (360 Grad);
    }
}

@keyframes blips {
  14% {
    Hintergrund: radialer Farbverlauf (2vmin-Kreis bei 75 % 70 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %);
  }

  14,0002 %
    Hintergrund: radialer Farbverlauf (2vmin-Kreis bei 75 % 70 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %), radialer Farbverlauf (2vmin-Kreis bei 63 % 72 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %);
  }

  25 % {
    Hintergrund: radialer Farbverlauf (2vmin-Kreis bei 75 % 70 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %), radialer Farbverlauf (2vmin-Kreis bei 63 % 72 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %), radialer Farbverlauf (2vmin-Kreis bei 56 % 86 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %);
  }

  26% {
    Hintergrund: radialer Farbverlauf (2vmin-Kreis bei 75 % 70 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %), radialer Farbverlauf (2vmin-Kreis bei 63 % 72 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %), radialer Farbverlauf (2vmin-Kreis bei 56 % 86 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %);
    Deckkraft: 1;
  }

  100 % {
    Hintergrund: radialer Farbverlauf (2vmin-Kreis bei 75 % 70 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %), radialer Farbverlauf (2vmin-Kreis bei 63 % 72 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %), radialer Farbverlauf (2vmin-Kreis bei 56 % 86 %, #ffffff 10 %, #20ff4d 30 %, rgba (255, 255, 255, 0) 100 %);
    Deckkraft: 0;
  }
}

ps: Nachdruck von https://www.html5tricks.com/pure-css3-radar-scanning.html

Zusammenfassen

Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung von Radarscanbildern mit CSS3. Weitere relevante Inhalte zu CSS3-Radarscanbildern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Tägliche Studiennotizen im HTML-Designmuster

>>: Detaillierte Erläuterung der grundlegenden Befehle des Docker-Ausführungsprozesses und des Images