Tipp für schnellen CSS-Code! Animierter Text mit Farbverlauf

Als Nächstes erstellen wir den animierten Farbverlaufstexteffekt mit benutzerdefinierten benutzerdefinierten Eigenschaften und einem Hintergrund-Clip.

Jhey Tompkins

Wechseln Sie zu CodePen und erstellen Sie einen neuen Stift.

Erstellen Sie das Markup für Ihren Text. Hier sehen Sie eine Überschrift mit dem Wort „Speedy“:

<h1 class="boujee-text">Hello!</h1>

Dann geben wir unserem body einen dunkleren background-color:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

Erweitern Sie font-size in unserem Text. Verwenden Sie clamp, um sie responsiv zu machen:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

Erstellen Sie zwei benutzerdefinierte Eigenschaften für die zu verwendenden Farben. Wenden Sie ein linear-gradient auf background mit diesen Farben an und drehen Sie es um 90 Grad:

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

Erstellen Sie eine benutzerdefinierte Eigenschaft, die Sie für die horizontale Hintergrundgröße verwenden können. background-size-x:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

Wenn Sie den Hintergrund auf den Text zuschneiden möchten, setzen Sie color auf transparent und legen Sie background-clip: text fest:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

Jetzt können Sie es so belassen und mit background-position und dem Gradienten experimentieren, der in background-image verwendet wird. Oder Sie können diesen Farbverlauf über Ihren Text hinweg animieren. Definieren Sie zunächst einen Keyframe für die Animation. Dabei wird die benutzerdefinierte Eigenschaft „--bg-size“ verwendet, die Sie zuvor definiert haben. Ein gutes Beispiel für benutzerdefinierte Eigenschaften auf einen Bereich, die die Wartung erleichtern.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

Wenden Sie dann die Animation mit animation an:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

Wenn Sie diesen Schritt weiter ausführen möchten, können Sie Ihren Animationscode in eine Medienabfrage verpacken, um die Bewegungspräferenzen Ihrer Nutzenden zu berücksichtigen:

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

Fertig. 🎉 Sie haben mit CSS mithilfe von benutzerdefinierten Bereichseigenschaften und background-clip animierten Farbverlaufstext erstellt.

Hier ist dieser Tipp in seiner schnellen Videoform! ⚡️

Möchtest du die Nachricht als Tweet senden? 🐦

Bleib dran! ạ •ᴥ•ạn

Hero-Image von Vladislav Klapin auf Unsplash