CSS İpucu! Animasyonlu Gradyan Metin

Bu animasyonlu gradyan metin efektini kapsamlı özel özellikler ve arka plan klibi ile yapalım

Jhey Tompkins

CodePen'e giderek yeni bir kalem oluşturun.

Metniniz için işaretleme oluşturun. "Speedy" kelimesini içeren bir başlık kullanalım:

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

Sonra, body için daha koyu bir background-color değeri verelim:

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

Metnimizdeki font-size kullanın. Duyarlı hale getirmek için clamp kullanın:

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

Kullanacağımız renkler için iki özel nitelik oluşturun. Bu renkleri kullanarak background öğesine bir linear-gradient uygulayın ve 90 derece döndürün:

.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. background-size-x süreyle kullanın:

.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 göre kırpmak için color değerini transparent olarak ve background-clip: text değerini ayarlayın:

.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, sütunu olduğu gibi bırakıp background-position ve background-image içinde kullanılan renk geçişi ile denemeler yapabilirsiniz. Veya bu gradyanı metninizde animasyon haline getirebilirsiniz. İlk olarak, animasyon için bir animasyon karesi tanımlayın. Bu işlemle, daha önce tanımladığınız --bg-size özel özelliği kullanılacak. Bakımı sizin için kolaylaştıran, kapsamlı bir özel mülk örneği.

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

Daha sonra, animasyonu animation kullanarak uygulayın:

.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 bir adım öteye taşımak için animasyon kodunuzu bir medya sorgusuna sarmalayarak kullanıcının hareketle ilgili tercihlerine uygun hale getirebilirsiniz:

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

Bitti! 🎉 Kapsamlı özel özellikleri ve background-clip öğesini kullanarak CSS ile animasyonlu gradyan metinleri oluşturdunuz.

İşte bu ipucunu kısa video biçiminde sunuyoruz! ⚡️

Bunu tweet biçiminde mi tercih edersiniz? 🐦

Mükemmel kalın! ism •ᴥ• IAM

Vladislav Klapin tarafından Unsplash'teki hero resim