Tips CSS Cepat! Teks Gradien Animasi

Mari kita buat efek teks gradien animasi dengan properti khusus cakupan dan klip latar belakang

Jhey Tompkins

Buka CodePen dan buat pena baru.

Buat markup untuk teks Anda. Mari kita gunakan {i>header<i} dengan kata "Speedy":

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

Kemudian, mari kita beri body kita warna background-color yang lebih gelap:

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

Tambahkan font-size pada teks kita. Gunakan clamp agar responsif:

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

Buat dua properti khusus untuk warna yang akan kita gunakan. Terapkan linear-gradient ke background menggunakan warna tersebut dan putar 90 derajat:

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

Buat properti kustom yang dapat Anda gunakan untuk ukuran latar belakang horizontal. Gunakan untuk 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%;
}

Untuk memangkas latar belakang ke teks, setel color ke transparent, dan setel 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;
}

Pada tahap ini, Anda dapat membiarkannya di sana dan bereksperimen dengan background-position dan gradien yang digunakan di background-image. Atau, Anda dapat menganimasikan gradien tersebut di seluruh teks. Pertama, tentukan keyframe untuk animasi. Tindakan ini akan menggunakan properti kustom --bg-size yang Anda tentukan sebelumnya. Contoh yang bagus dari properti kustom cakupan yang mempermudah pemeliharaan untuk Anda.

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

Kemudian, terapkan animasi menggunakan 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;
}

Untuk melangkah lebih jauh, Anda dapat menggabungkan kode animasi dalam kueri media untuk menghormati preferensi pengguna untuk gerakan:

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

Selesai! 🎉 Anda telah membuat beberapa teks gradien animasi dengan CSS menggunakan properti kustom cakupan dan background-clip.

Berikut tips singkat ini dalam bentuk video. ⚡️

Lebih suka ini dalam bentuk tweet? 🐦

Tetap Hebat! `•ᴥ•`

Banner besar oleh Vladislav Klapin di Unsplash