Szybka wskazówka dotycząca CSS. Animowany tekst gradientowy

Utwórzmy efekt animowanego tekstu gradientu, używając właściwości niestandardowych o zakresie i ukrycia tła

Jhey Tompkins

Przejdź do narzędzia CodePen i utwórz nowy rysik.

Utwórz znaczniki dla swojego tekstu. Użyjmy nagłówka ze słowem „Szybkość”:

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

Zmieńmy kolor obrazu body na ciemniejszy background-color:

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

Zwróć uwagę na font-size w SMS-ie. Używaj elementu clamp, aby zapewnić jego elastyczność:

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

Utwórz dwie właściwości niestandardowe dla kolorów, których będziemy używać. Zastosuj kolor linear-gradient do elementu background w tych kolorach i obróć go o 90 stopni:

.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%;
}

Utwórz właściwość niestandardową, której będziesz używać do określania rozmiaru tła w poziomie. Używaj jej w przypadku usługi 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%;
}

Aby przyciąć tło do tekstu, ustaw color na transparent, a background-clip: text:

.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;
}

Na tym etapie możesz zostawić pole i poeksperymentować z elementami background-position oraz gradientem używanym w elemencie background-image. Możesz też animować ten gradient w tekście. Najpierw określ klatkę kluczową dla animacji. Spowoduje to użycie zdefiniowanej wcześniej właściwości niestandardowej --bg-size. Dobry przykład usług niestandardowych o zakresie, które ułatwią Ci obsługę.

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

Następnie zastosuj animację przy użyciu elementu animation:

.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;
}

Aby zrobić to dalej, możesz owinąć kod animacji w zapytaniu o multimedia, by uwzględnić preferencje użytkownika dotyczące ruchu:

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

Gotowe 🎉 Utworzyłeś(-aś) animowany tekst gradientu w pliku CSS za pomocą właściwości niestandardowych o zakresie i elementu background-clip.

Oto ta wskazówka w krótkiej formie filmu. ⚡️

Wolisz to w formie tweeta? 🐦

Nie trać z oczu! </ •ᴥ•ç

Baner powitalny autorstwa Vladislava Klapina w filmie Unsplash