Cara Membuat Animasi Gradient Teks Dengan CSS3

Hai, ketemu lagi dengan saya, berikut ini saya akan bagikan kalian tutorial mengenai bagaimana Cara Membuat Animasi Gradient Teks Dengan CSS3, cara nya cukup mudah, silahkan kalian ikuti langkah-langkah berikut ini.

Langsung saja, silahkan kalian buat struktur HTML seperti berikut.

<div class="wrapper">
  <h1>HELLO<br>WORLD!</h1>
  <p>Lorem ipsum dolor sit amet</p>
</div>

Untuk paragrafnya silahkan kalian bisa isikan bebas, setelah itu, kita buat animasi gradient teks nya dengan kode CSS3 berikut ini.

:root {
  background: #fff;
  font-family: Helvetica, Arial;
}

.wrapper {
  width: 90vw;
  max-width: 500px;
  margin: 30px auto;
}

p {
  color: #888;
  font-size: 0.8em;
  letter-spacing: 0.1em;
}

h1 {
  background: linear-gradient(270deg, #22d6a8, #4099ab, #5d40ab);
  background-size: 600% 600%;
  -webkit-animation: AnimationName 5s ease infinite;
  -moz-animation: AnimationName 5s ease infinite;
  animation: AnimationName 5s ease infinite;
  font-size: 5em;
  line-height: 0.8em;
  display: inline-block;
  text-decoration: underline;
  margin: 0 0 20px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

Kalo sudah, jangan lupa simpan terlebih dahulu, kemudian jalankan atau buka pada browser masing-masing dan lihat hasilnya.

Baik selesai sudah tutorial mengenai Cara Membuat Animasi Gradient Teks Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂