Hızlı CSS İpucu! Animasyonlu Gradyan Metni

üzerine atlamak kod kalemi ve yeni bir kalem oluşturun.

Metniniz için işaretlemeyi oluşturun. “Speedy” kelimesini içeren bir başlık kullanalım:

h1 class="boujee-text">Hello!&LT/h1>

O zaman hakkımızı verelim body daha koyu background-color:

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

çarpmak font-size metnimizde. Kullanmak clamp duyarlı hale getirmek için:

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

Kullanacağımız renkler için iki özel özellik oluşturun. Uygula linear-gradient için background bu renkleri kullanarak ve 90 derece döndürerek:

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

Yatay arka plan boyutu için kullanabileceğiniz özel bir özellik oluşturun. için kullan 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%;
}

Arka planı metne kırpmak için color ile transparentve ayarla 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;
}

Bu noktada, onu orada bırakıp deney yapabilirsiniz. background-position ve kullanılan gradyan background-image. Veya bu gradyanı metniniz boyunca canlandırabilirsiniz. İlk olarak, animasyon için bir anahtar kare tanımlayın. Bu, --bg-size daha önce tanımladığınız özel özellik. Bakımı sizin için kolaylaştıran kapsamlı özel özelliklere iyi bir örnek.

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

Ardından kullanarak animasyonu uygulayın 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;
}

Bunu daha da ileriye götürmek için, animasyon kodunuzu, kullanıcınızın hareket tercihlerine saygı gösterecek şekilde bir medya sorgusuna sarabilirsiniz:

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

Tamamlamak! 🎉 Kapsamlı özel özellikleri kullanarak CSS ile animasyonlu degrade metinler oluşturdunuz ve background-clip.

İşte hızlı video biçiminde bu ipucu! ⚡️

Bunu tercih et tweet formu? 🐦

Harika Kalın! ʕ •ᴥ•ʔ

Kahraman görseli Vladislav Klapin Açık Unsplash