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
React implementiert ein allgemeines Beispiel für eine Skelett-Bildschirmkomponente
Inhaltsverzeichnis Was ist ein Skelettsieb? Demo ...
Detaillierte Schritte zum Bereitstellen von lnmp unter Docker
Inhaltsverzeichnis Ziehen Sie ein CentOS-Image Ge...
Detaillierte Untersuchung des Problems der Array-Deduplizierung in JavaScript
Inhaltsverzeichnis Vorwort 👀 Beginnen Sie mit der...
Unter Windows 10 Linux Ubuntu 18.04 als Dualsystem installieren (Installationsanleitung)
Ich habe ein Linux-Ubuntu-System auf meinem Compu...
Die Rolle und Methoden der Informationskommunikation im visuellen Design von Websites (Bild und Text)
Das zeitgenössische visuelle Webdesign hat drei vö...
MySQL PXC erstellt einen neuen Knoten mit ausschließlich IST-Übertragung (empfohlen)
Anforderungsszenario: Die vorhandene PXC-Umgebung...
Tipps zum Anzeigen von Verlaufsdatensätzen und Hinzufügen von Zeitstempeln in Linux
Tipps zum Anzeigen von Verlaufsdatensätzen und Hi...
Nginx definiert die Zugriffsmethode für Domänennamen
Ich erstelle derzeit Nginx, kann aber nicht über ...
Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen
1. Übersicht Gruppieren nach bedeutet, Daten nach...
Detaillierte Anwendungsfälle von Vue3 Teleport
Offizielle Website https://cli.vuejs.org/en/guide...
So fügen Sie Links zu FLASH in HTML ein und machen es mit allen gängigen Browsern kompatibel
Schauen Sie sich zuerst den Code an Code kopieren ...
Lösung für den Mysql-FEHLER 1045 (28000): Zugriff verweigert für Benutzer root@localhost-Problem im Ubuntu-System
Erster Weg: skip-grant-tables: Sehr nützliche MyS...
So deinstallieren Sie MySQL 8.0 unter Linux
1. MySQL herunterfahren [root@localhost /]# Diens...
So ändern Sie den Replikationsfilter in MySQL dynamisch
MySQL Replikationsfilter dynamisch ändern Lassen ...
Detaillierte Erläuterung des Vorgangs zum Löschen der integrierten Version von Python in Linux
Großes Problem: Löschen Sie nicht einfach die Pyt...