So erzielen Sie mit CSS einen Daten-Hotspot-Effekt

Die Wirkung ist wie folgt:

Bildbeschreibung hier einfügen

analysieren

1. Hier sehen Sie drei Kreise, die den Punkt umkreisen und eine Zoomanimation ausführen.

Wir schreiben also vier Quaderpunkte + 3 Kreise

<!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>

Bildbeschreibung hier einfügen

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:

Bildbeschreibung hier einfügen

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

Tipps zur HTML-Formatierung und langen Dateien für das Webdesign

Eine einfache Strategie zur ID-Generierung: Implementierung der Generierung einer global eindeutigen ID aus einer MySQL-Tabelle

Es gibt viele Möglichkeiten, eine globale ID zu g...

So erzielen Sie mit CSS einen Daten-Hotspot-Effekt

Tipps zur HTML-Formatierung und langen Dateien für das Webdesign

HTTP-Rückgabecodeliste (Erklärung auf Chinesisch und Englisch)

Detaillierter Prozess zur Installation des Docker-Plugins in IntelliJ IDEA (Version 2018)

MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)

So installieren Sie FastDFS in Docker

Tutorial zu HTML-Tabellen-Tags (13): Regeln für interne Rahmenstilattribute

Zusammenfassung der MySQL InnoDB-Sperren

So erhalten Sie Formulardaten in Vue

Implementierung der MySQL GRANT-Benutzerautorisierung

Installieren des Ping-Tools in einem von Docker erstellten Container

Artikel empfehlen

So verwenden Sie pdf.js zur Vorschau von PDF-Dateien in Vue

So führen Sie ein Python-Skript auf Docker aus

Detailliertes Tutorial zur Installation von Harbor Private Warehouse mit Docker Compose

Was ist Nginx-Lastausgleich und wie wird er konfiguriert?

Eine einfache Strategie zur ID-Generierung: Implementierung der Generierung einer global eindeutigen ID aus einer MySQL-Tabelle

Eine detaillierte Einführung in den Lade- und Analyseprozess von HTML-Seiten

Beispielcode für ungewöhnliche HTML-Tags „optgroup“, „sub“, „sup“ und „bdo“

Realisierung des Karusselleffekts basierend auf jQuery

Implementierungsbeispiel für das Zurücksetzen des CSS-Reset-Stils

So kapseln Sie Axios einfach in Vue

Lösen Sie das Problem verstümmelter chinesischer Zeichen, wenn Sie Daten von Tomcat unter Linux in MySQL einfügen

Detaillierte Schritte zum Ausführen eines Springboot-Projekts in Linux Docker

CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung

Eine kurze Diskussion über das Prinzip der Anmeldung durch Scannen von js-QR-Codes

Einführung in die gängigen Festplattenverwaltungsbefehle von Linux