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
Fallstudie zu JavaScript Anti-Shake
Prinzip Das Prinzip von Anti-Shake ist: Du kannst...
Details zum Schreiben von React in einem Vue-Projekt
Wir können jsx/tsx-Dateien direkt erstellen Die P...
Beispielcode für Box-Shadow und Drop-Shadow zum Erreichen einer unregelmäßigen Projektion
Wenn wir einem Rechteck oder einer anderen Form, ...
CSS3 verwendet var()- und calc()-Funktionen, um Animationseffekte zu erzielen
Wissenspunkte in der Vorschau anzeigen. Animation...
Erläuterung der Docker Compose-Netzwerkeinstellungen
Grundlegende Konzepte Standardmäßig erstellt Comp...
Mit CSS3 implementierter Gradienten-Folieneffekt
Ergebnisse erzielen Code html <div Klasse=&quo...
So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine PID erstellt werden kann
Problembeschreibung Die MySQL-Startfehlermeldung ...
Implementierung der TCPWrappers-Zugriffskontrolle in Centos
1. Übersicht über TCP-Wrapper TCP Wrapper „verpac...
Grafisches Tutorial zur Installation der neuesten Version des MySQL-Servers unter Windows 7 64 Bit
In letzter Zeit habe ich die MySQL-Datenbank unte...
Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?
Das Vergessen des Passworts ist ein Ärgernis. Was...
Methoden und Schritte zur Verwendung von http-Proxy-Middleware zur domänenübergreifenden Implementierung von Proxy in Node
Inhaltsverzeichnis 1. Installieren Sie das Proxy-...
Zusammenfassung der Ausnahmen bei der MySQL-Datenbankverbindung (sammelwürdig)
Beim Bereitstellen des Projekts auf Centos ist mi...
Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?
Was sind :is und :where? :is() und :where() sind ...
Beispielcode zum Erzielen eines kleinen Dreiecksrahmeneffekts mit reinem CSS3+DIV
Der spezifische Code lautet wie folgt: Der HTML-C...
So installieren und implementieren Sie MySQL 8.0 unter CentOS8
Die offizielle Version 8.0.11 von MySQL 8 wurde v...