Beispielcode zur Implementierung einer dynamischen leuchtenden Spezialeffektanimation von Kreisen mit reinem CSS3

Beispielcode zur Implementierung einer dynamischen leuchtenden Spezialeffektanimation von Kreisen mit reinem CSS3

In diesem Artikel wird hauptsächlich der Beispielcode von reinem CSS3 vorgestellt, um die dynamische leuchtende Spezialeffektanimation von Kreisen zu realisieren, und er wird mit Ihnen geteilt. Die Einzelheiten sind wie folgt:

Effektbild:

Code:

<!DOCTYPE HTML>
<html>
<Kopf>
    <title>Reines CSS3 zur Erzielung einer dynamischen, kreisförmig leuchtenden Spezialeffektanimation</title>
    <Stil>
        Körper {
            Hintergrundfarbe: #000000;
        }
 
        @keyframes funkeln {
            0% {
                Deckkraft: 0,2;
                transformieren: Skalierung(1);
            }
 
            50 % {
                Deckkraft: 0,5;
                transformieren: Skalierung (1,12);
            }
 
            100 % {
                Deckkraft: 0,2;
                transformieren: Skalierung(1);
            }
        }
 
        .Kreis-Wrap {
            Position: absolut;
            links: 100px;
            oben: 100px;
        }
 
        .Kreis {
            Position: relativ;
            Breite: 24px;
            Höhe: 24px;
        }
 
        .kleiner Kreis {
            Randradius: 50 %;
            Breite: 12px;
            Höhe: 12px;
            Hintergrund: #FF0033;
            Position: absolut;
        }
 
        .großer Kreis {
            Position: absolut;
            oben: -6px;
            links: -6px;
            Breite: 100 %;
            Höhe: 100%;
            Randradius: 50 %;
            Hintergrund: #FF0033;
            Animation: 1 Sekunde lang funkelnd und unendlich langsam;
            Animationsfüllmodus: beides;
        }
 
        @keyframes skalieren {
            0% {
                transformieren: skalieren(1)
            }
 
            50 %,
            75 % {
                transformieren: skalieren(3)
            }
 
            78 %,
            100 % {
                Deckkraft: 0
            }
        }
 
        @keyframes skaliert {
            0% {
                transformieren: skalieren(1)
            }
 
            50 %,
            75 % {
                transformieren: skalieren(2)
            }
 
            78 %,
            100 % {
                Deckkraft: 0
            }
        }
 
        .smallcircle2 {
            Position: absolut;
            Breite: 12px;
            Höhe: 12px;
            Hintergrundfarbe: #ffffff;
            Randradius: 50 %;
            oben: 100px;
            links: 200px;
        }
 
        .smallcircle2:vor {
            Inhalt: '';
            Anzeige: Block;
            Breite: 12px;
            Höhe: 12px;
            Randradius: 50 %;
            Deckkraft: .4;
            Hintergrundfarbe: #ffffff;
            Animation: Maßstab 1 s, unendlich, kubisch-bézier (0, 0, .49, 1.02);
        }
 
        .bigcircle2 {
            Position: absolut;
            Breite: 12px;
            Höhe: 12px;
            Randradius: 50 %;
            Deckkraft: .4;
            Hintergrundfarbe: #ffffff;
            oben: 100px;
            links: 200px;
            Animation: Skalen 1 s unendlich kubisch-bezier (0, 0, .49, 1.02);
        }
 
        @keyframes skaliert {
            0% {
                transformieren: skalieren(1)
            }
 
            50 %,
            75 % {
                transformieren: skalieren(3)
            }
 
            78 %,
            100 % {
                Deckkraft: 0
            }
        }
 
        .Artikel {
            Position: absolut;
            Breite: 14px;
            Höhe: 14px;
            Hintergrundfarbe: #FFFF00;
            Randradius: 50 %;
            oben: 150px;
            links: 100px;
        }
 
        .item:vor {
            Inhalt: '';
            Anzeige: Block;
            Breite: 14px;
            Höhe: 14px;
            Randradius: 50 %;
            Deckkraft: .7;
            Hintergrundfarbe: #FFFF00;
            Animation: skalenlos 1 s unendlich kubisch-bezier (0, 0, .49, 1.02);
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Kreis-Wrap">
        <div Klasse="Kreis">
            <div Klasse="großer Kreis"></div>
            <div Klasse="small-circle"></div>
        </div>
    </div>
    <div Klasse="smallcircle2"></div>
    <div Klasse="bigcircle2"></div>
    <div Klasse="Artikel"></div>
</body>
</html>

Die spezifische Implementierung dieses Effekts verwendet hauptsächlich CSS3-Animation

Es hat 8 Eigenschaften:

Animationsname gibt den Namen der @keyframes-Animation an.
Wird verwendet, um den Namen einer Animation zu definieren.
Wenn wir einem Element mehrere Animationen zuweisen möchten, müssen wir diese nur mit Kommas "," auflisten.

Animationsdauer Animationsdauer

Wird verwendet, um die Dauer der Animation eines Elements in Sekunden (s) oder Millisekunden (ms) anzugeben. Der Standardwert ist 0

Die Animations-Timing-Funktion gibt die Geschwindigkeitskurve der Animation an. Der Standardwert ist „Ease“.
linear gibt einen Übergangseffekt an, der mit der gleichen Geschwindigkeit beginnt und endet (entspricht cubic-bezier(0,0,1,1)). ease gibt einen Übergangseffekt an, der langsam beginnt, dann schneller wird und schließlich langsam endet (cubic-bezier(0.25,0.1,0.25,1)).
ease-in gibt einen Übergangseffekt an, der langsam beginnt (entspricht cubic-bezier(0.42,0,1,1)).
ease-out gibt einen Übergangseffekt an, der langsam endet (entspricht cubic-bezier(0,0,0.58,1)).
ease-in-out gibt einen Übergangseffekt an, der langsam beginnt und endet (entspricht cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) definiert eigene Werte in der cubic-bezier-Funktion. Mögliche Werte sind Zahlen zwischen 0 und 1.

Animationsverzögerung gibt an, wann die Animation startet. Der Standardwert ist 0. Negative Werte sind erlaubt, die Animation überspringt 2 Sekunden und tritt in den Animationszyklus ein, d. h. beginnend mit der 2s-Animation

„animation-iteration-count“ gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist 1

animation-direction gibt an, ob die Animation im nächsten Zyklus in umgekehrter Richtung abgespielt werden soll. Die Standardeinstellung ist „normal“.

Der Animationsfüllmodus gibt an, ob der Animationseffekt vor oder nach der Wiedergabe der Animation sichtbar sein soll.

animation-play-state gibt an, ob die Animation läuft oder angehalten ist. Die Standardeinstellung ist „läuft“.

Zusamenfassend,

Animation: Name, Dauer, Zeitfunktion, Verzögerung, Iterationsanzahl, Richtung, Füllmodus, Wiedergabestatus

Originaltext: https://blog.csdn.net/qq_34576876/article/details/95532946

https://blog.csdn.net/weixin_42541698/article/details/102686976

Damit ist dieser Artikel über den Beispielcode zur Implementierung einer dynamischen Spezialeffektanimation mit leuchtenden Kreisen unter Verwendung von reinem CSS3 abgeschlossen. Weitere relevante CSS3-Inhalte zu dynamischen leuchtenden Kreisen 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!

<<:  Tiefgreifendes Verständnis der sieben Kommunikationsmethoden von Vue-Komponenten

>>:  Informationen zur Auswahl des Uhrzeit-, Datums- und Zeichenfolgentyps in MySQL

Artikel empfehlen

Detaillierter Prozess zum Erstellen von mysql5.7.29 unter Centos7 von Linux

1. MySQL herunterladen 1.1 Download-Adresse https...

MySQL-Einstellungscode für die grüne Version und Details zum Fehler 1067

MySQL-Einstellungscode für grüne Version und Fehl...

Verwendung des LRU-Algorithmus in der in Vue integrierten Komponente „Keep-Alive“

Inhaltsverzeichnis Auch die Verwendung der integr...

Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt

Inhaltsverzeichnis Vorwort Entdecken Sie die Ursa...

So gehen Sie mit dem Verlust von Parametern um, wenn Sie die Seite aktualisieren und Parameter an den Vue-Router übergeben

Inhaltsverzeichnis Überblick Methode 1: Parameter...

JavaScript zum Erreichen eines einfachen Message Board-Falls

Verwenden Sie Javascript, um ein Message Board-Be...

Zusammenfassung einiger gängiger Techniken in der Front-End-Entwicklung

1. So zeigen Sie das Datum rechts in der Artikelti...

Verwendung des Linux-Befehls ifconfig

1. Befehlseinführung Der Befehl ifconfig (Netzwer...

So erstellen Sie eine Vue3-Desktopanwendung

In diesem Artikel sehen wir uns an, wie man mit V...

Verwaltung privater Docker-Repositorys und Löschen von Bildern in lokalen Repositorys

1: Installation eines privaten Docker-Warehouses ...

Eine schnelle Lösung für das Problem, dass im entpackten Paket von Windows 64-Bit MySQL 5.7 oder höher kein Datenverzeichnis und keine my-default.ini vorhanden sind und der Dienst nicht gestartet werden kann (Problemübersicht)

Ich bin ein SQL-Anfänger und dachte, die Installa...

So implementieren Sie Dual-Machine-Master und Backup mit Nginx+Keepalived

Vorwort Lassen Sie mich zunächst Keepalived vorst...

Detaillierte Schritte zur Installation eines Hadoop-Clusters unter Linux

Inhaltsverzeichnis 1. Erstellen Sie ein Hadoop-Ve...

Tiefgreifendes Verständnis der Erstellung und Implementierung von Servlets in Tomcat

1. Was ist ein Servlet 1.1. Erklären Sie in offiz...

Implementierung des Scroll-Snap-Scroll-Ereignisstopps und der Elementpositionserkennung in CSS

1. Scroll Snap ist eine unverzichtbare Fähigkeit ...