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

Methoden und Schritte zum Upgrade von MySql5.x auf MySql8.x

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

Methoden und Schritte zum Upgrade von MySql5.x auf MySql8.x

So verwenden Sie Vuex in einem Vue-Projekt

Mysql | Detaillierte Erklärung der Fuzzy-Abfrage mit Platzhaltern (wie, %, _)

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

Verschachtelte Verwendungsoperation für MySQL-Aggregatfunktionen

Detaillierte Analyse von MySQL-Deadlock-Problemen

So setzen Sie das Root-Passwort von Mysql in Windows zurück, wenn Sie es vergessen haben

Beispiel für die Implementierung von Gruppierung und Deduplizierung in einer MySQL-Tabellenverknüpfungsabfrage

So verwenden Sie Anti-Shake und Throttling in Vue

Realisieren Sie Kartenaggregations- und Streueffekte basierend auf Vue + OpenLayer

Artikel empfehlen

Beispiel zum Erstellen von Tabellenanweisungen für den Benutzer Scott in der MySQL-Version von Oracle

Sieben Lösungen für klassische verteilte Transaktionen zwischen MySQL und Golan

Vue implementiert Bildverifizierungscode beim Anmelden

Das neueste grafische Tutorial zur Installation und Konfiguration von MySQL 5.7.23

So verwenden Sie Navicat zum Bedienen von MySQL

Detaillierte Erklärung der Lösung für das beim Start hängengebliebene Ubuntu-Dualsystem

Unterschiede zwischen proxy_pass in zwei Modulen in nginx

MySQL Series 10 MySQL-Transaktionsisolierung zur Implementierung der Parallelitätskontrolle

So verwenden Sie die Verlaufsumleitung in React Router

Drei Strategien zum Umschreiben von MySQL-Abfrageanweisungen

Vue implementiert Pulldown, um mehr zu laden

JavaScript zum Implementieren des Slider-Verifizierungscodes

Analyse des Implementierungsprozesses der drei Modi des VMWare-Netzwerkadapters

Verwenden Sie personalisierte Suchmaschinen, um die personalisierten Informationen zu finden, die Sie benötigen

Detaillierte Erklärung des Linux-Netstat-Befehls