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

React verwendet die Upload-Komponente von Antd, um die Funktion zum Senden von Dateiformularen zu implementieren (vollständiger Code).

Ich habe gerade angefangen, React für Projekte zu...

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

Hintergrundbild-Cache unter IE6

Testfragen und Referenzantworten zum Thema Webdesign und Produktion

Erläuterung der Dockerfile-Anweisungen und der grundlegenden Struktur

Vue implementiert 3 Möglichkeiten zum Wechseln zwischen Registerkarten und zum Beibehalten des Datenstatus

MySQL 5.7.17 Installations-Tutorial mit Lösungen für das Problem, dass der MySQL-Dienst nicht gestartet werden kann

Konfigurationsmethode für die Serverzeitsynchronisierung von Centos 7.4 [basierend auf dem NTP-Dienst]

Detaillierte Erklärung zur Konfiguration einer statischen IP in Centos8

Detaillierte Erklärung der benutzerdefinierten Ereignisse von Vue-Komponenten

Beheben Sie den Fehler während der Verbindungsausnahme in Docker

Zusammenfassung einiger Punkte, die bei der Registrierung von Tomcat als Dienst zu beachten sind

Artikel empfehlen

So kopieren Sie schnell große Dateien unter Linux

Zusammenfassung der Wissenspunkte zu den Linux-Befehlen ps und pstree

LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung

Erläuterung zur Optimierung der Tomcat+MySQL-Konfiguration mit hoher Parallelität

Detaillierte Erklärung des Unterschieds zwischen $router und $route in Vue

Beispiel für die horizontale Anordnung von li-Tags in HTML

React verwendet die Upload-Komponente von Antd, um die Funktion zum Senden von Dateiformularen zu implementieren (vollständiger Code).

Express-Projektdateiverzeichnisbeschreibung und detaillierte Funktionsbeschreibung

So ändern Sie das Root-Passwort von MySQL unter Linux

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

Zusammenfassung der Shell-Methode zum Bestimmen, ob eine Variable leer ist

Unterschiede zwischen ES6-Vererbung und ES5-Vererbung in js

Detaillierte Erklärung zum Kopieren und Sichern von Docker-Containerdaten

So laden Sie die Kamera in HTML

Über den Unterschied zwischen der Überprüfung von Elementen und der Anzeige des Quellcodes einer Webseite