Tips CSS Cepat! Teks Gradien Animasi

Mari kita buat efek teks gradien animasi dengan properti kustom cakupan dan background-clip

Jhey Tompkins

Buka CodePen dan buat pena baru.

Buat markup untuk teks Anda. Mari kita gunakan header dengan kata "Cepat":

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

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

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

Tambahkan font-size pada teks. Gunakan clamp untuk membuatnya responsif:

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

Buat dua properti kustom 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 memotong latar belakang ke teks, tetapkan color ke transparent, dan tetapkan 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 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 baik 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 lebih lanjut, Anda dapat menggabungkan kode animasi Anda 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 ini tips ini dalam bentuk video singkat. ⚡️

Lebih suka dalam bentuk tweet? 🐦

Tetaplah Hebat! ʕ •ᴥ•ʔ

Banner besar oleh Vladislav Klapin di Unsplash