Code Tutorial | CSS slow hover efek

Seperti yang anda tahu.. hover ni adalah efek saat disentuh mouse.. samada gambar link dan lain2..

Penggunaan yang paling meluas ialah pada link.. sebagai contoh bila link disentuh mouse warna link akan bertukar dengan serta merta..

tapi dengan menggunakan code slow hover efek ni.. link tu tidak akan bertukar serta merta.. tapi secara perlahan2 mengikut setting yang ditetapkan..

Aku pun baru tahu cara penggunaan efek ni.. sebelum aku terlupa.. adalah lebih baik aku buat entri untuk panduan pada masa yang akan datang.. ('',)

Berikut aku sertakan 2 live demo untuk pemahaman

Contoh 1

Letak mouse disini untuk melihat apa yang akan terjadi... lalalalala


Code di tulis seperti berikut

<style type='text/css'>#henteri {background:#ff3366;color:#151515;overflow:hidden;border:5px dashed #0f0;width:90%;height:350px;border-radius:15px;text-align:left;padding:6px;-webkit-transition-duration:5.5s;-moz-transition-duration:5.5s;}

#henteri:hover {background:#151515;color:#eee;overflow:auto;border:5px solid #3366ff;}</style><center><div id='henteri'><br/>Letak mouse disini untuk melihat apa yang akan terjadi... lalalalala<br/><br/></div>

Contoh 2

Apa yang penting ialah barisan code seperti berikut

-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;

masa delay adalah 1.5s tu.. anda boleh setkan ikut suka hati

cara penggunaan terpulang dari pemikiran logik anda.. aku pun masih kaji lagi ekekek..

salah 1 contoh penggunaan yanh best ialah anda letakkan code tu pada body dan setkan masa 15s.. bila sampai masa blog akan tukar warna dan tulisan..

Cuba lepak dalam entri selama 31.5 saat.. tengok apa jadik..

Sekian