Pembahasan berikut ini mengenai bagaimana Cara Membuat Animasi Warna Pelangi pada teks, seperti yang telah kita ketahui bahwa sebuah website tidak akan terlepas dari yang namanya animasi, efek, dan lain-lain, ada banyak sekali animasi dan efek-efek yang bisa kita lihat pada tampilan website, mulai dari animasi gambar, teks dan animasi yang lain nya. Karena dengan animasi dan efek itulah tampilan website tidak akan terlihat kaku untuk dilihat dan akan terlihat hidup apabila didalam website tersebut terdapat animasi-animasi menarik, nah, buat kalian yang ingin membuat sebuah animasi khusus nya animasi pada teks, tidak ada salahnya untuk menyimak pembahasan berikut ini. Langsung saja simak langkah-langkah Cara Membuat Animasi Warna Pelangi pada teks.
Seperti pada judul diatas kita akan membuat animasi warna pelangi pada teks, langkah pertama kita akan buat satu buah teks bebas seperti contoh berikut dengan menggunakan HTML5.
<body> <h1>DUMETSCHOOL.</h1> </body>
Setelah kita membuat teks seperti diatas, langkah selanjut nya adalah kita akan buat animasi warna pada teks tersebut dengan sintak CSS3 berikut ini.
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
body {
background: #2c3e50;
}
h1 {
margin-top: 15%;
line-height: 180px;
font-size: 180px;
font-family: 'Baloo Bhaina', cursive;
text-align: center;
background: linear-gradient(
to right,
#A6CE37, #ECE71C, #0FC6E6, #F95D44, #816271, #9F1958, #081B6A, #59D7EE);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 800px;
background-position: center 0%;
animation: background-slide 25s infinite linear;
}
@keyframes background-slide {
100% {
background-position: -8160px;
}
}
Setelah sintak HTML5 dan CSS3 telah diketikan semua, langkah terakhir adalah simpan file kemudian jalankan pada browser masing-masing dan lihat hasil nya. Maka akan terlihat animasi warna yang berjalan pada teks yang telah kita buat, untuk warna pada teks kalian bisa susun menyesuaikan sendiri pada sintak berikut.
background: linear-gradient(
to right,
#A6CE37, #ECE71C, #0FC6E6, #F95D44, #816271, #9F1958, #081B6A, #59D7EE
);
Kalian bisa menyusun warna sesuai keinginan, baiklah cukup sekian pembahasan mengenai bagaimana Cara Membuat Animasi Warna Pelangi pada teks, semoga bisa bermanfaat dan menambah referensi dalam membuat animasi pada tampilan web. Untuk lebih jelas tutorial diatas kalian bisa melihat hasil akhir pada demo dibawah ini.
