Hallo teman-teman pada tutorial kali ini saya akan mengajarkan tentang cara memanipulasi lebar pada element HTML dengan transisi CSS.
Apa kabar teman-teman semuanya? semoga baik-baik saja, pada tutorial kali ini kita akan belajar tentang transisi pada CSS, lebih tepatnya memanipulasi lebar dengan menggunakan transisi CSS.
Sebelumnya apa itu transisi? transisi adalah suatu efek yang ada pada CSS3 dimana kita dapat memberikan animasi didalam element yang kita tentukan, nah pada studi kasus kali ini saya akan mengajarkan cara memanipulasi lebar dengan transisi css.
oke untuk lebih jelasnya kita langsung saja praktek, silahkan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>transisi</title> </head> <body> <div></div> </body> </html> |
saya membuat div pada bagian body, dimana nanti div ini yang akan kita berikan efek animasi, sekarang kita akan lanjut kepada script cssnya, silahkan tamahkan css internal pada file yang tadi scriptnya seperti berikut ini :
|
1 2 3 4 5 |
<style> *{margin:0; padding:0;} div{width:90px; height:20px; background:red; transition:all 0.5s ease} div:hover{width:300px; cursor:pointer} </style> |
sehingga kelengkapan scriptnya adalah seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>transisi</title> <style> *{margin:0; padding:0;} div{width:90px; height:20px; background:red; transition:all 0.5s ease} div:hover{width:300px; cursor:pointer} </style> </head> <body> <div></div> </body> </html> |
Sehingga ketika kita save hasilnya akan seperti berikut ini ketika sebelum di hover :
Dan ketika sudah dihover hasilnya akan seperti berikut:
Ketika kita hover maka lebarnya akan bertambah dengan efek yang smooth, oke teman-teman untuk tutorial kali ini tentang cara memanipulasi lebar pada element html dengan transisi css.
Mudah-mudahan tutorial kali ini bermanfaat untuk teman-teman semuanya, terimakasih.