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
Konfigurationsschritte für die MySQL-Gruppenreplikation (empfohlen)
MySQL-Group-Replication ist eine neue Funktion, d...
Stellen Sie Ihre Website automatisch auf den IE7-Kompatibilitätsmodus ein, wenn Sie mit IE8 surfen
Vorwort Um sicherzustellen, dass Ihre Webseiten in...
Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung
Inhaltsverzeichnis 1. Konstruktor und Instanziier...
Implementierungsbeispiel für das Zurücksetzen des CSS-Reset-Stils
Einführung: Alle Browser verfügen über Standardst...
Probleme und Lösungen bei der Verwendung der TweenMax-Animationsbibliothek in Angular
Ich habe in letzter Zeit nichts zu tun, also bast...
Detaillierte Erklärung des JavaScript-Statuscontainers Redux
Inhaltsverzeichnis 1. Warum Redux 2. Redux-Datenf...
Detaillierte Erklärung zum Herunterladen, Installieren und Verwenden des Nginx-Servers
herunterladen http://nginx.org/en/download.html E...
Eine vollständige Anleitung zum Abfragen und Löschen doppelter Datensätze in MySQL
Vorwort In diesem Artikel werden hauptsächlich di...
Gängige Methoden zur Optimierung der Docker-Imagegröße
Die Docker-Images, die wir normalerweise erstelle...
So kompilieren und installieren Sie PHP und Nginx in einer Ubuntu-Umgebung
Dieser Artikel beschreibt, wie man PHP und Nginx ...
Webdatenspeicherung: Cookie, UserData, SessionStorage, WebSqlDatabase
Plätzchen Dies ist eine Standardmethode zum Speic...
Das vergessene Button-Tag
Hinweis: Dieser Artikel wurde von jemand anderem ü...
Installieren Sie JDK8 im RPM-Modus auf CentOS7
Nach der erfolgreichen Installation von CentOS 7 ...
Echarts-Beispielcode zur Verwendung mehrerer X-Achsen zur Erstellung einer siebentägigen Wettervorhersage
Inhaltsverzeichnis UI-Design Echarts Beispieleffe...
Tipps zum Escapen von HTML-Texten
Heute habe ich auf CSDN einen kleinen Trick zum Es...