So erzielen Sie mit CSS einen Daten-Hotspot-Effekt
|
Die Wirkung ist wie folgt:
analysieren 1. Hier sehen Sie drei Kreise, die den Punkt umkreisen und eine Zoomanimation ausführen.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
.Stadt {
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: grau;
Position: relativ;
}
.pul {
Breite: 8px;
Höhe: 8px;
Hintergrundfarbe: #09f;
Randradius: 50 %;
oben: 0;
unten: 0;
links: 0;
rechts: 0;
Rand: automatisch;
Position: absolut;
}
/* Wähle Attribute aus, deren Klassennamen mit pul beginnen*/
.Stadt div[Klasse^="pul"] {
/* Mitte */
oben: 0;
unten: 0;
links: 0;
rechts: 0;
Rand: automatisch;
Position: absolut;
Breite: 8px;
Höhe: 8px;
Randradius: 50 %;
Kastenschatten: 0px 0px 10px #09f;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Stadt">
<div Klasse="pul"></div>
<div Klasse="pul1"></div>
<div Klasse="pul2"></div>
<div Klasse="pul3"></div>
</div>
</body>
</html>
Nach dem Schreiben müssen wir den drei Kreisen eine Zoomanimation hinzufügen. Sie sehen jedoch, dass die drei Kreise die Animation nicht gleichzeitig auslösen. Daher müssen wir für die drei Kreise unterschiedliche Verzögerungszeiten festlegen, um die Animation zu definieren.
/*Animation definieren*/
@keyframes pul {
0% {}
50 % {
Breite: 20px;
Höhe: 20px;
Deckkraft: 1;
}
100 % {
Breite: 50px;
Höhe: 50px;
Deckkraft: 0;
}
}Verwenden von Animationen
.Stadt>div:n-tes-Kind(2) {
Animation: Pul 2s .5s linear unendlich;
}
.Stadt>div:n-tes-Kind(3) {
Animation: Pul 2s 1s linear unendlich;
}
.Stadt>div:n-tes-Kind(4) {
Animation: Pul 2s 1,5s linear unendlich;
}Die Wirkung ist wie folgt:
Das Hintergrundbild könnt ihr euch hier selbst suchen, ich werde es hier also nicht posten. Der Download ist kostenpflichtig. Dies ist das Ende dieses Artikels zur Verwendung von CSS zum Erzielen von Daten-Hotspot-Effekten. Weitere relevante CSS-Daten-Hotspot-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: So verwenden Sie React-Slots
>>: Schritte zum Reparieren einer Beschädigung der Datei grub.cfg im Linux-System
Artikel empfehlen
HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren
Fallbeschreibung: - Verwenden Sie Tabellen, um Se...
HTML-Selbststudium (I) Grundlegende Elemente und Attribute üben (Schreiben Sie Ihren eigenen Code)
Ich habe das Tutorial auf W3school durchgearbeitet...
Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS
1. Die Entstehung des Problems Habe eine flache L...
Kopieren von JS-Objekten (Deep Copy und Shallow Copy)
Inhaltsverzeichnis 1. Oberflächliche Kopie 1. Obj...
So implementieren Sie die King of Glory-Personal-Ladeseite mit CSS3
Wer King of Glory gespielt hat, sollte mit der Wi...
Eine kurze Analyse zum besten Umgang mit vergessenen MySQL 8-Passwörtern
Vorwort Leser, die mit MySQL vertraut sind, werde...
Detailliertes Installationstutorial von Docker unter CentOS
Docker ist in CE und EE unterteilt. Die CE-Versio...
So legen Sie Listenstilattribute in CSS fest (lesen Sie einfach diesen Artikel)
Eigenschaften des Listenstils Es gibt 2 Arten von...
Docker-Batch starten und alle Container schließen
Im Docker Starten Sie alle Containerbefehle Docke...
Gründe, warum MySQL 8.0-Statistiken ungenau sind
Vorwort Unabhängig davon, ob es sich um Oracle od...
Detaillierte Erklärung der XML-Syntax
1. Dokumentationsregeln 1. Groß-/Kleinschreibung b...
Vue-Konfigurationsdetails für mehrere Seiten
Inhaltsverzeichnis 1. Der Unterschied zwischen me...
js Promise-Methode zur gleichzeitigen Steuerung
Inhaltsverzeichnis Frage Hintergrund Idee & U...
Lösung für das Problem des unzureichenden Speicherressourcenpools des Docker-Servers
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Prometheus überwacht MySQL mithilfe der Grafana-Anzeige
Inhaltsverzeichnis Prometheus überwacht MySQL übe...