CSS3-Animation zum Erzielen des Streamer-Button-Effekts

Beim Erlernen von CSS3 habe ich festgestellt, dass sich mit CSS3-Attributen problemlos viele coole Effekte erzielen lassen. Animation ist ein gängiges Attribut in CSS3-Animationseffekten. Jetzt lernen wir, wie man diese Eigenschaft nutzt, um den folgenden Schaltflächeneffekt mit einem Streamer zu erzeugen, wenn sich die Maus auf der Schaltfläche befindet~

Bildbeschreibung hier einfügen

Lassen Sie mich vorher kurz die Verwendung des Animationsattributs vorstellen.
Animation: [Animationsname (Name der auf das Objekt angewendeten Animation abrufen oder festlegen)] || [Animationsdauer (Dauer der Objektanimation abrufen oder festlegen)] || [Animationszeitfunktion (Übergangstyp der Objektanimation abrufen oder festlegen)] || [Animationsverzögerung (Verzögerungszeit der Objektanimation abrufen oder festlegen)] || [Animationsiterationsanzahl (Anzahl der Schleifen der Objektanimation abrufen oder festlegen)] || [Animationsrichtung (Abrufen oder festlegen, ob sich die Objektanimation während der Schleife rückwärts bewegt)]
Schritt 1 : Legen Sie die Breite, Höhe und den abgerundeten Rand des Div fest, um ein abgerundetes Rechteck zu erhalten.
Schritt 2 : Stellen Sie die Hintergrundfarbe auf einen Farbverlauf aus drei Farben ein (die letzte Farbe muss dieselbe sein wie die erste Farbe, damit es während des Flusses nicht zu Farbstaus kommt) und stellen Sie die Hintergrundgröße auf 400 % ein. Der Hauptcode lautet wie folgt

Hintergrundbild: linearer Farbverlauf (nach links, #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
    Hintergrundgröße: 400 %;

Analyse: Jetzt ist der Hintergrund ein Farbverlauf aus drei Farben, der viermal so groß ist wie das Div, sodass das Div nur eine Farbe anzeigt. Der Rahmenanimationseffekt wird verwendet, um die Bewegung des Hintergrunds zu steuern, und das Animationsattribut kann dafür sorgen, dass er kontinuierlich fließt.

Bildbeschreibung hier einfügen

Schritt 3 : Verwenden Sie die Rahmenanimation, um die horizontale Bewegung der Hintergrundpositionierung zu steuern. (@keyframes-Funktion: Animation definieren. Einfache Animationen können die Schlüsselwörter „von“ und „bis“ direkt verwenden. Komplexe Animationen können 0 % bis 100 % verwenden, um den entsprechenden Animationseffekt segmentweise festzulegen, d. h. den Übergang von einem Zustand in einen anderen.)

@keyframes ausführen{
            100 %{
                Hintergrundposition: 400 % 0px;
            }
        }

Verwenden Sie dann die Pseudoklasse Hover, um den Animationseffekt zu erzielen, wenn die Maus nach oben bewegt wird ~
Pseudo-Klasse Hauptcode

@keyframes ausführen{
            100 %{
                Hintergrundposition: 400 % 0px;
            }
        }
        .div2:hover{
            Animation: Lauf 4 s linear 0 s unendlich;
        }

Fall vollständiger Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dokument</title>
    <Stil>
        .div2{
            Position: absolut;
            links: calc(50% - 150px); 
            oben: berechnet (50 % – 150 Pixel); 
            Breite: 300px;
            Höhe: 100px;
            Rahmenradius: 50px;
            Textausrichtung: zentriert;
            Hintergrundfarbe: Aqua;
            Zeilenhöhe: 100px;
            Hintergrundbild: linearer Farbverlauf (nach links, #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
            Hintergrundgröße: 400 %; 
        }
        @keyframes ausführen{
            100 %{
                Hintergrundposition: 400 % 0px;
            }
        }
        .div2:hover{
            Animation: Lauf 4 s linear 0 s unendlich;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="div2">
        Lass uns gehen
    </div>
</body>
</html>

Es wird ein einfacher CSS3-Streamer-Animationseffekt realisiert

Dies ist das Ende dieses Artikels darüber, wie Sie mit Animationen in CSS3 den Streamer-Button-Effekt erzielen. Weitere relevante Inhalte zu CSS3-Animations-Streamer-Buttons finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt

>>: Installieren Sie Docker unter CentOS 7

Einfaches Verständnis und Beispiele für MySQL Index Pushdown (ICP)

Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

Problem: vue-cil3 wird mit Warnungen ausgeführt, ...

CSS3-Animation zum Erzielen des Streamer-Button-Effekts

Einfaches Verständnis und Beispiele für MySQL Index Pushdown (ICP)

Backup zwischen MySQL-Datenbank und Oracle-Datenbank importieren

Beispielcode zum Konvertieren von Videos mit der ffmpeg-Befehlszeile

So verwenden Sie VUE und Canvas, um ein Thunder Fighter-Tippspiel zu implementieren

Beispiel für einen WeChat-Applet-Rechner

Leitfaden für Anfänger zum Erstellen einer Website ⑥: Detaillierte Verwendung von FlashFXP

So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue

Detaillierte Erläuterung des Prozesses zum Erstellen von Bodennavigationseffekten mit JavaScript

Einfacher CSS-Textanimationseffekt

So führen Sie den sudo-Befehl aus, ohne in Linux ein Passwort einzugeben

Artikel empfehlen

So lösen Sie das Problem, dass der Bridge-Modus der virtuellen VMware-Maschine nicht auf das Internet zugreifen kann

MySQL-FAQ-Serie: So vermeiden Sie eine plötzliche Vergrößerung der ibdata1-Datei

Praktische Erklärung zum Bearbeiten, Speichern und Beenden von Dateien unter Linux

So installieren Sie das Pip-Paket unter Linux

HTML-Tabellen-Markup-Tutorial (14): Tabellenkopf

So leiten Sie innerhalb von zwei Sekunden auf andere Seiten einer HTML-Seite um

Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

Eine kurze Diskussion über den Aufbau und den Betriebsmechanismus des Echtzeit-Computerframeworks Flink Cluster

Lösung für das Timeout-Problem der SNMP4J-Serververbindung

So verwenden Sie Vue zum Implementieren von CSS-Übergängen und Animationen

Detaillierte Erläuterung des Implementierungsprozesses der ServerSocket-Standard-IP-Bindung

CSS3 erstellt eine Webanimation, um einen springenden Balleffekt zu erzielen

So erstellen Sie eine Vue3-Desktopanwendung

So fragen Sie die Schnittmenge von Zeiträumen in MySQL ab

Detaillierte Erläuterung des Nginx-Reverse-Generation-Beispiels für verteilten Mogilefs-Speicher