Utwórzmy efekt animowanego tekstu gradientu, używając właściwości niestandardowych o zakresie i ukrycia tła
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