Schneller Tipp: So animieren Sie Textgradienten und Muster in CSS

In diesem schnellen Tipp zeigen wir, wie einfach es ist, einen Hintergrundgradienten mit CSS zu animieren.

In einem kürzlich erschienenen Artikel haben wir gezeigt, wie man einen Hintergrundgradienten auf Text festlegt. Die folgende Codepen -Demo zeigt das Ergebnis.

Siehe den Stift
Text mit links nach rechts Gradienten von sitepoint (@sinepoint)
auf Codepen.

Lesen Sie diesen Artikel durch, wenn Sie nicht sicher sind, wie wir zu diesem Ergebnis gekommen sind, da wir unten auf diesem Beispiel aufbauen.

Fügen wir für diese Demo einen zusätzlichen Farben zu unserem Gradientenhintergrund hinzu:

:

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

Wenn wir Hintergrund-Clip ausschalten: Text und Textfarbe: Für einen Moment transparent, erhalten wir ein besseres Gefühl dafür, wie unser Gradient das Inhaltsfeld des Textes füllt.

Siehe den Stift
Text mit animierter Hintergrundgradienten: 1 von SitePoint (@sinepoint)

auf Codepen.

Lassen Sie uns nun die Schritte der Animation unseres Hintergrundgradienten durchlaufen.

Schritt 1: Anpassen der Hintergrundgröße

Um unseren Gradientenhintergrund zu animieren, müssen wir es größer machen als das Inhaltsfeld des Textes, damit wir nicht alles gleichzeitig sehen können. Wir können das mit der handlichen Hintergrundgroßmobile tun. (Sie können hier alles über Hintergrundgröße lesen.)

Ich werde die Breite unseres Hintergrundgradienten auf das Dreifache der Breite unseres Überschriftenelements setzen:

<span>h1 {
</span>  <span>background-size: 300% 100%;
</span><span>}
</span>

Nun ist nur ein Drittel des Gradientenhintergrunds zu jeder Zeit sichtbar, wie unten angezeigt.

Siehe den Stift
Text mit animierter Hintergrundgradienten: Schritt 2 von SitePoint (@sitepoint)

auf Codepen.

Schritt 2: Einstellen einer Animation

Als nächstes werden wir eine Animation einrichten, die den Hintergrund umgeht, damit wir im Laufe der Zeit verschiedene Teile davon sehen.

Wir können eine einfache Animationsregel wie SO einrichten:

<span>h1 {
</span>  <span>animation: gradientAnimation 8s linear infinite;
</span><span>}
</span>

Das wird den Hintergrund alle 16 Sekunden einmal hin und her bewegen.

Als nächstes stellen wir eine @KeyFrames -Anweisung ein:

<span><span>@keyframes gradientAnimation</span> {
</span>  <span>0% {
</span>    <span>background-position: 0;
</span>  <span>}
</span>  <span>to {
</span>    <span>background-position: 100%;
</span>  <span>}
</span><span>}
</span>

Diese einfache Anweisung @KeyFrames verschiebt unseren Hintergrund alle acht Sekunden von oben links nach unten rechts.

Im unten stehenden Stift haben wir wieder einen Hintergrund-Clip deaktiviert: Text und Farbe: transparent, damit wir sehen können, was im Hintergrund passiert.

Siehe den Stift
Text mit animierter Hintergrundgradienten: Schritt 3 von SitePoint (@sitepoint)
auf Codepen.

Sobald wir nach Hintergrund-Clip: Text und Farbe: transparent wieder eingesetzt werden, sehen wir das fertige Produkt.

Siehe den Stift
Text mit animierter Hintergrundgradienten: Schritt 4 (endgültig) von sitepoint (@sinepoint)
auf Codepen.

Ziemlich cool!

Animieren eines Hintergrundbildes

In unserem Artikel über das Hinzufügen von Gradienteneffekten und -mustern zum Text haben wir auch ein Blumenhintergrund verwendet. (Siehe den Stift hier hier.)

Lassen Sie uns auch diesen Hintergrund animieren. Wir werden es etwas anders machen, da wir das Hintergrundbild nicht verzerren möchten.

Lassen Sie uns die Hintergrundgröße entfernen: enthalten aus der ursprünglichen Demo und legen Sie überhaupt keine Hintergrundgröße fest. Das lässt uns das:

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

Das Ergebnis ist in der folgenden Codepen -Demo gezeigt.

Siehe den Stift
Animieren eines Hintergrundbildes auf Text von SitePoint (@sinepoint)
auf Codepen.

Versuchen Sie, Hintergrund-Clip auszuschalten: Text und Textfarbe: Für einen Moment transparent, wenn Sie sehen möchten, was im Hintergrund passiert.

Unser Hintergrundbild wiederholt standardmäßig, was für dieses bestimmte Bild nicht schlecht aussieht. (Versuchen Sie nur aus Interesse und fügen Sie die Hintergrundaufnahme hinzu: No-Repeat, um zu sehen, was ohne sich wiederholende Hintergrund passiert.) In anderen Situationen, in denen das Hintergrundbild nicht so gut fliesen kann, möchten Sie möglicherweise das Wiederholen des Bildes verhindern und das Wiederholen und das Wiederholen und das Wiederholen und das Wiederholen von Verwenden Sie dann die Hintergrundgröße, um das Bild größer zu machen, wie wir es mit dem obigen Gradientenhintergrund getan haben. Zum Beispiel:

<span>h1 {
</span>  <span>background-size: 300% 100%;
</span><span>}
</span>

Hier ist der Effekt, dies auf unserer floralen Demo zu tun.

Siehe den Stift
Animieren eines Hintergrundbildes auf Text: Schritt 1a (Hintergrundgröße Experiment) von SitePoint (@sinepoint)
auf Codepen.

Schlussfolgerung

Wir könnten viel spektakulärere Animationen durchführen, aber das Ziel war es, es hier einfach zu halten. Sie können tiefer in CSS -Keyframes und Animationen eintauchen, um mit CSS -Animation loszulegen. Sie können auch mit dem Timing der Animation, dem Winkel des Gradienten usw. herumspielen.

Wie im vorherigen Artikel erwähnt, haben Sie Spaß damit, aber gehen Sie nicht über Bord, da zu viel von dieser Art von Animation ärgerlich werden kann. Ein subtiler animierter Hintergrund auf einer Überschrift könnte nur den Hauch von Interesse oder Intrigen hinzufügen, den Sie benötigen, um Ihr Publikum zu engagieren.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: So animieren Sie Textgradienten und Muster in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!