Cara Membuat Animasi Text Gradient Seperti di Website Iphone 14 Pro

Demo

Raja Kode - Kali kita akan membuat animasi fade in/out teks gradien mewah seperti yang telah Anda lihat di halaman Apple iPhone 14 Pro.

Penasaran bagaimana cara membuatnya? yuk simak tutorial dibawah ini.

Cara Membuat Teks Gradient keren

1. Tambahkan text dengan div pembungkus, contoh

<div class="hero-text">
   <p>Cara baru yang ajaib untuk berinteraksi dengan iPhone. Fitur keselamatan penting baru yang dirancang untuk menyelamatkan nyawa. Kamera 48MP yang inovatif untuk detail menakjubkan. Semuanya ditenagai oleh chip ponsel cerdas terbaik.</p>
</div>

2. Masukan kode CSS3 dibawah ini pada website milikmu.

.hero-text p {
  position: relative;
  width: 55vw;
  font-size: 40px;
  color: transparent;
  margin: auto;
  line-height: 1.5;
  padding: 20px;
  background: linear-gradient(transparent, transparent 25%, #ffb6ff, #b344ff, transparent 75%, transparent);
  -webkit-background-clip: text;
          background-clip: text;
  background-size: 100% 400%;
  background-position: center 0;
  -webkit-animation: textScroll 6s infinite linear alternate;
          animation: textScroll 6s infinite linear alternate;
}
@-webkit-keyframes textScroll {
  100% {
    background-position: center 100%;
  }
}
@keyframes textScroll {
  100% {
    background-position: center 100%;
  }
}