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
Bei der Installation von mysql-8.0.19-winx64 sind Probleme aufgetreten: Verzeichnis „xxxx\Database\“ kann nicht erstellt werden
mysql-8.0.19-winx64 von der offiziellen Website h...
Details und Beispielcode der MySQL-Replikationstabelle
Detaillierte Erklärung der MySQL-Replikationstabe...
Ein Artikel zeigt Ihnen, wie Sie mit React ein Rezeptsystem implementieren
Inhaltsverzeichnis 1. Rezeptsammlung 1.1 Projekth...
Der Unterschied zwischen Div und Tabelle in HTML (in allen Aspekten ausführlich besprochen)
1: Unterschiede bei Geschwindigkeit und Lademethod...
Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)
Dieser Artikel enthält hauptsächlich Lösungen für...
Verlustfreie Erweiterungsmethode unter Linux
Überblick Der Server des Cloud-Plattform-Kunden k...
So rufen Sie die Browser-Sharing-Funktion in Vue auf
Vorwort Vue (ausgesprochen /vjuː/, ähnlich wie vi...
MySQL 8.0.12 – Schnellinstallations-Tutorial
Die Installation von MySQL 8.0.12 dauerte zwei Ta...
Schritte für Vue zur Verwendung von Ref, um Komponenten über Ebenen hinweg zu erhalten
Vue verwendet Ref, um Komponenteninstanzen über E...
So installieren und ändern Sie das Anfangskennwort von mysql5.7.18 unter Centos7.3
In diesem Artikel erfahren Sie, wie Sie mysql5.7....
So stellen Sie ein Vue-Projekt unter Nginx bereit
Heute werde ich den Server nginx verwenden und mu...
So verwenden Sie Node-Scaffolding zum Erstellen eines Servers zur Implementierung der Token-Verifizierung
Inhalt Verwenden Sie Scaffolding, um schnell ein ...
Detaillierte Erklärung der Verwendung und des Unterschieds zwischen nohup und & in Linux
Beispiel: Wir verwenden den Python-Code loop_hell...
SQL GROUP BY ausführliche Erklärung und einfaches Beispiel
Die GROUP BY-Anweisung wird in Verbindung mit der...
InnerHTML verstehen
<br />Verwandte Artikel: innerHTML HTML DOM ...