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
Artikel empfehlen
Erstellen Sie einen benutzerdefinierten Taskleistenindikator für Ihre Aufgaben unter Linux
Auch heute noch sind Taskleistensymbole ein magis...
Führen Sie die folgenden Schritte aus, damit Docker Images abrufen kann
1. Docker Pull zieht das Image Wenn Sie zum Abruf...
Installieren und konfigurieren Sie MySQL 5.7 unter CentOS 7
Dieser Artikel testet die Umgebung: CentOS 7 64-B...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.19 (Win10)
Detailliertes Tutorial zum Herunterladen und Inst...
Analyse der Verwendung von „replace“ und „regexp“ zum Ersetzen regulärer Ausdrücke in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...
CSS wählt das erste untergeordnete Element unter dem übergeordneten Element aus (:first-child)
Vorwort Ich habe vor Kurzem :first-child in einem...
Klicken Sie auf die Schaltfläche, um den Text in ein Eingabefeld umzuwandeln. Klicken Sie auf „Speichern“, um ihn in Textimplementierungscode umzuwandeln.
Klicken Sie auf die Schaltfläche, um den Text in ...
So halten Sie eine lange Verbindung aufrecht, wenn Sie den Nginx-Reverse-Proxy verwenden
· 【Szenenbeschreibung】 Nach HTTP1.1 unterstützt d...
TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)
Die Projektanforderungen lauten: Datum und Uhrzei...
Verwenden Sie @font-face, um Sonderzeichen auf Webseiten zu implementieren (benutzerdefinierte Schriftarten erstellen)
Vor einigen Tagen habe ich einen Artikel über die...
Implementierungscode für die teilweise Aktualisierung einer HTML-Seite
Aktualisierung der Ereignisantwort: Aktualisierun...
Anwendung von Ankerpunkten in HTML
Ankerpunkt festlegen <a name="nach oben&qu...
Tipps zum reflektierenden Lernen von JavaScript
Inhaltsverzeichnis 1. Einleitung 2. Schnittstelle...
Detaillierte Anwendungsfälle von MySql Escape
MySQL-Escape Escape bedeutet die ursprüngliche Se...
Eine kurze Einführung in die einfache Verwendung der CentOS7-Firewall und offener Ports
Übersicht (offiziell gibt es eine ausführlichere ...