CSS3-Radarscan-Kartenbeispielcode
|
Verwenden Sie CSS3, um coole Radar-Scan-Bilder zu erstellen:
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
Artikel empfehlen
Detaillierte Erklärung der Lösung für das Problem, dass der Inhalt, auf den der src des Iframes verweist, nicht aktualisiert wird
Problembeschreibung html <iframe id="h5In...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15
In diesem Artikel werden die Installations- und K...
Implementierung der Clusterkonstruktion im Docker Redis5.0-Cluster
Systemumgebung: Ubuntu 16.04LTS In diesem Artikel...
So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts
Ursache So importieren Sie externe Dateien in ein...
Vue+Swiper realisiert Timeline-Effekt
In diesem Artikel wird der spezifische Code von v...
Detaillierte Schritte zum Starten des Django-Projekts mit nginx+uwsgi
Wenn wir ein Webprojekt mit Django entwickeln, wi...
Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten
<Text> <div id="Wurzel"> &l...
So implementieren Sie die Zuordnung zwischen Rahmenfenstern und die Verwendung des Zielattributs von Hyperlinks
Der Schlüssel zum Erreichen der Zuordnung des Rahm...
So erstellen Sie Ihren eigenen nativen JavaScript-Router
Inhaltsverzeichnis Vorwort Einführung JavaScript ...
Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts
Vorwort Verwenden Sie js, um einen Jahresrotation...
Zusammenfassung der Verwendung spezieller Operatoren in MySql
Vorwort Es gibt vier Arten von Operatoren in MySQ...
Verstehen Sie einfach die Schreib- und Ausführungsreihenfolge von MySQL-Anweisungen
Es gibt einen großen Unterschied zwischen der Sch...
JavaScript verwendet häufig Array-Deduplizierung tatsächliche Kampf Quellcode
Mit der Array-Deduplizierung wird man häufig bei ...
Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS
Um den Benutzern beim Layouten der Seite einen an...
Zusammenfassung der MySQL-Vollsicherung, Master-Slave-Replikation, kaskadierenden Replikation und Halbsynchronisierung
MySQL-Vollsicherung 1. Aktivieren Sie das Binärpr...