BLANTERWISDOM101

Simple RainbowText On Hover Effect Using Animation in CSS

Sunday, 23 February 2020

Program || Html\CSS


Halo guys.. It's a ngoding time! Apa yg akan kita buat sekarang? Kita main receh dulu ya.. Kodingan simpel.. Hanya menggunakan string animation pada css doank.. Di sini gw pake html versi 5 ya.. Ga ngaruh sih kalo untuk ini doank versi nya.. Ya tapi enak ajh html5 lebih bisa bikin nyaman kek doi ea :b. Oke, langsung ajh.. Oh ya.. Di sini gw  css nya internal store.. Jadi ga pake ngimport link di lain dir :v.


- Oke, yg pertama kita buat kerangka organ terlebih dahulu :v.
<!DOCTYPE html>
<html>
<head>
<title>RainbowText</title>
</head>
<body>
</body>
</html>

Nah, itu merupakan kerangka utama dalam kodingan html..

- Langkah selanjutnya.. Buat tabel di body dulu.. Di sini gw namain pada atribut class nya "tabel" menggunakan tag div.
<!DOCTYPE html>
<html>
<head>
<title>RainbowText</title>
</head>
<body>
<div class="tabel">
<p>Pelangi text By AryaKun</p>
</div>
</body>
</html>

- Oke.. Saatnya buat daging sama kulit.. Bukan tengkorak doank.. Karena pada class div nya kita namakan "tabel" maka pada kodingan css nya juga harus nama yg sama dan jangan lupa kasih tanda titik (.) di depan nama karena itu merupakan sebuah class pada html. Jadi ".tabel".. Sebenernya sih tampilannya terserah ya.. Tergantung kamu nya.. Kalo pengen hidungnya mancung ya dibuat mancung :v. Dan karena sesuai judul.. Maka kita kasih animasi nya pada hover tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.tabel{
 color:lime;
 background-color:rgba(0,0,0,0.5);
 font-family:Verdana,Arial,sans-serif;
 border-radius:50px;
}
.tabel:hover {
 animation: textPelangi 5s infinite;
}

@keyframes textPelangi {

 0%{color:lime;}
 20%{color:red;}
 30%{color:blue;}
 40%{color:yellow;}
 50%{color:purple;}
 60%{color:aqua;}
 70%{color:silver;}
 80%{color:gray;}
 90%{color:green;}
 100%{color:maroon;}
}
</style>
</head>
<body>
<div class="tabel">
<p>Pelangi text By AryaKun</p>
</div>
</body>
</html>

Oke, sekian tutor receh kali ini.. Semoga bersenang - senang.. Jangan lupa bahagia ya.. Bye2.. 👋👋


Share This :
_/Arya-Kun

Hanya seorang pelajar yang hobi nya membuat kode dan berharap ilmu nya bermanfaat bagi orang lain.

1 komentar