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

Vue implementiert die Drag & Drop-Funktion für Bilder

Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS

1. Die Entstehung des Problems Habe eine flache L...

CSS3-Animation zum Erzielen des Streamer-Button-Effekts

Vue implementiert die Drag & Drop-Funktion für Bilder

Einführung in HTML für Frontend-Entwickler

Eine Sammlung von Button-Hover-Rand- und Hintergrundanimationen basierend auf CSS-Eigenschaften

Zusammenfassung der grundlegenden Wissenspunkte der Linux-Gruppe

Detaillierte Erklärung von BOM und DOM in JavaScript

js implementiert das Hinzufügen und Entfernen von Warenkörben sowie die Preisberechnung

Mysql GTID Mha-Konfigurationsmethode

VUE Erste Schritte Erlernen der Ereignisbehandlung

js canvas implementiert den Bestätigungscode und erhält die Bestätigungscodefunktion

Die vernachlässigten Spezialeffekte von META-Tags (Seitenübergangseffekte)

Artikel empfehlen

Zusammenfassung der MySQL-Vollsicherung, Master-Slave-Replikation, kaskadierenden Replikation und Halbsynchronisierung

So gestalten Sie das Frontend einer Website elegant und attraktiv für Benutzer

So aktivieren Sie den Fernzugriff in Docker

Schritte zum Bereitstellen eines Spring Boot-Projekts mit Docker

Vue realisiert den gesamten Prozess der Slider-Drag-Verifizierungsfunktion

Verwenden von Shadowsocks zum Erstellen eines transparenten LAN-Gateways

Singleton-Entwurfsmuster in JavaScript

In WMP eingebettetes HTML, kompatibel mit Chrome und IE, detaillierte Einführung

Warum gibt es das in JS?

Analyse der Situation, in der js die Unterstützung von CSS-Attributen (Werten) bestimmt und informiert

MySQL verwendet die Partitionsfunktion, um eine horizontale Partitionierungsstrategie zu implementieren

Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS

Detaillierte Erläuterung der Vorgehensweise bei der Installation des Permeate-Range-Systems mit VMware

Lösung für die Upload-Einschränkung von Element-ui-Uploaddateien

Implementierung einer Warenkorbfunktion basierend auf Vuex