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

Faint: „Nutzen Sie Web 2.0, um standardkonforme Seiten zu erstellen“

CSS3-Animation zum Erzielen des Streamer-Button-Effekts

Faint: „Nutzen Sie Web 2.0, um standardkonforme Seiten zu erstellen“

Tipps zum Escapen von HTML-Texten

Miniprogramm zur Implementierung des Paging-Effekts

Dekomprimierung, Installation, Sicherung und Wiederherstellung von MySQL in einer Windows-Umgebung

Untersuchung und Korrektur des seltsamen Verhaltens von parseInt() in js

So ändern Sie schnell das Hostattribut eines MySQL-Benutzers

Beispielcode einer SVG-Schaltfläche basierend auf einer CSS-Animation

Konfigurationsprozess für selbststartende Dienste für einzelne Instanzen von MySQL5.7

Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen

Natives JS implementiert ein Minesweeper-Spiel mit benutzerdefiniertem Schwierigkeitsgrad

Artikel empfehlen

Detaillierte Erklärung der NodeJS-Modularität

Eingebettetes Transplantations-Docker-Fehlerproblem (Zusammenfassung)

So implementieren Sie E-Mail-Benachrichtigungen in Zabbix

Detaillierte Erläuterung der offiziellen Gesichtsüberprüfung des WeChat Mini-Programms

Front-End-Leistungsoptimierung – die Schwachstellen, über die Front-End-Ingenieure sprechen müssen

Ein Artikel zum Verständnis von Operatoren in ECMAScript

10 Gründe, warum Linux immer beliebter wird

Lösung für das Problem, dass beim Hinzufügen eines Tomcat-Containers zu Docker kein Zugriff auf die Homepage möglich ist

Installationsschritte und Tutorial zur grundlegenden Verwendung von MySQL 8.0.12 unter Windows

Zusammenfassung zur Positionierung in CSS

So verwendet MySQL Transaktionen

Zusammenfassung neuer Anwendungsbeispiele für Calculated in Vue3

Natives JS zum Erzielen eines Puzzle-Effekts

14 Möglichkeiten zum Erstellen von Website-Inhalten, die Ihre Besucher fesseln

Der Unterschied zwischen MySQL Outer Join und Inner Join Abfrage