Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0

Heute zeige ich Ihnen einen Neon-Button-Animationseffekt, der mit CSS 3.0 implementiert wurde. Der Effekt ist wie folgt:

Nachfolgend sehen Sie die Code-Implementierung. Sie können diese gerne kopieren, einfügen und sammeln.

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>CSS 3.0 zum Erzielen von Neon-Button-Animationseffekten</title>
    <Stil>
        * {
            Schriftfamilie: „Microsoft YaHei“, serifenlos;
            Box-Größe: Rahmenbox;
        }
 
        Körper {
            Anzeige: Flex;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: zentriert;
            Mindesthöhe: 100vh;
            Hintergrund: #050801;
        }
 
        A {
            Position: relativ;
            Anzeige: Inline-Block;
            Polsterung: 25px 30px;
            Rand: 0 50px;
            Farbe: #03e9f4;
            Textdekoration: keine;
            Überlauf: versteckt;
            Übergang: 0,5;
            Buchstabenabstand: 4px;
            -webkit-box-reflect: unter 1px linearer Farbverlauf (transparent, #0005);
        }
 
        ein:n-tes-Kind(1) {
            Filter: Farbton-Drehung (290 Grad);
        }
 
        ein:n-tes-Kind(3) {
            Filter: Farbton-Drehung (110 Grad);
        }
 
        ein:schweben {
            Hintergrund: #03e9f4;
            Farbe: #050801;
            Kastenschatten: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
        }
 
        eine Spanne {
            Position: absolut;
            Anzeige: Block;
        }
 
        ein span:n-tes-Kind(1) {
            oben: 0;
            links: -100%;
            Breite: 100 %;
            Höhe: 2px;
            Hintergrund: linearer Farbverlauf (90 Grad, transparent, #03e9f4);
            Animation: Animate1 1s linear unendlich;
        }
 
        @keyframes animieren1 {
            0% {
                links: -100%;
            }
 
            50 %,
            100 % {
                links: 100 %;
            }
        }
 
        ein span:n-tes-Kind(2) {
            oben: 0;
            rechts: 0;
            Höhe: 100%;
            Breite: 2px;
            Hintergrund: linearer Farbverlauf (92 Grad, transparent, #03e9f4);
            Animation: Animate2 1s linear unendlich;
            Animationsverzögerung: 0,25 s;
        }
 
        @keyframes animate2 {
            0% {
                oben: -100%;
            }
 
            50 %,
            100 % {
                oben: 100 %;
            }
        }
 
        ein span:n-tes-Kind(3) {
            unten: 0;
            rechts: -100%;
            Höhe: 2px;
            Breite: 100 %;
            Hintergrund: linearer Farbverlauf (180 Grad, transparent, #03e9f4);
            Animation: Animate3 1s linear unendlich;
            Animationsverzögerung: 0,5 s;
        }
 
        @keyframes animate3 {
            0% {
                rechts: -100%;
            }
 
            50 %,
            100 % {
                rechts: 100%;
            }
        }
 
        ein span:n-tes-Kind(4) {
            unten: -100 %;
            links: 0;
            Breite: 2px;
            Höhe: 100%;
            Hintergrund: linearer Farbverlauf (270 Grad, transparent, #03e9f4);
            Animation: Animate4 1s linear unendlich;
            Animationsverzögerung: 0,75 s;
        }
 
        @keyframes animate4 {
            0% {
                unten: -100 %;
            }
 
            50 %,
            100 % {
                unten: 100 %;
            }
        }
    </Stil>
</Kopf>
 
<Text>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO-TASTE
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO-KNOPF
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO-TASTE
    </a>
</body>
 
</html>

Damit ist dieser Artikel über den Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0 abgeschlossen. Weitere relevante CSS-Neon-Button-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Beispiel einer JSON-Ausgabe im HTML-Format (Testschnittstelle)

>>: Vue-Kapselungskomponententool $attrs, $listeners-Verwendung

HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle

Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0

HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle

Lösungen für das Problem der Tabellenschachtelung und Rahmenzusammenführung

So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung

Detaillierte Erklärung des Plattformbusses des Linux-Treibers

So implementieren Sie eine Remote-Verbindung für Redis unter Linux

Beispielcode zum Mischen von Float und Margin in CSS

Tutorial zur Installation von MySQL 8.0.18 unter Windows (Community Edition)

Zusammenfassung gängiger Nginx-Techniken und Beispiele

Implementierungsschritte der MySQL-Master-Slave-Replikation

Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker

Artikel empfehlen

Rufen Sie die Schriftart entsprechend dem Schriftnamen auf, damit der Browser die gewünschte Schriftart anzeigt

Beispiele für die korrekte Verwendung von Schnittstellen- und Typmethoden in TypeScript

Sqoop-Exportkarte100 % reduzieren0 % steckt aus verschiedenen Gründen und Lösungen fest

Zwei Möglichkeiten zum Schreiben gespeicherter Prozeduren in MySQL mit und ohne Rückgabewerte

js realisiert das Verpacken mehrerer Bilder in Zip

Detaillierte Erläuterung der Nginx-Timeout-Konfiguration

Realisierung von Provinz- und Gemeindeverknüpfungseffekten auf Basis von JavaScript

MySQL Server 8.0.13.0 Installations-Tutorial mit Bildern und Text

So geben Sie chinesische Zeichen im Linux-Kernel aus

Ausführliche Erläuterung der Mysql-Deadlock-Anzeige und Deadlock-Entfernung

Verwendung der Zabbix-API in einer Linux-Shell-Umgebung

So konfigurieren Sie die Neuschreibung von Nginx-Domänennamen und die Auflösung von Platzhalterdomänennamen

Ein gründliches Verständnis des JS-nativen Syntaxprototyps, des proto und des Konstruktors

Installations- und Konfigurationsmethode von Zabbix Agent auf der Linux-Plattform

So stellen Sie das umfassende Benutzererlebnis sicher