Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping.
Yang patut diingat, tidak semua browser support Menu CSS3, untuk melihat tabel browser mana saja yang support dengan CSS3, bisa dilihat di www.findmebyip.com
Pertanyaanya adalah Bagaimana proses diatas bisa sampai terjadi?
Yang perlu anda sisipkan adalah kode CSS3 dan HTML di bawah ini:
<style type="text/css">Masukkan ke Gadget HTML/JavaScript.
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>
<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://lora-malunk.blogspot.com'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>
Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.
- angka 0.5s menandakan waktu perubahan dari animasi.
- angka 25deg menandakan rotasi perputaran dari area menu.
- angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu.
- untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya.
Sumber : http://lora-malunk.blogspot.com/2011/11/cara-membuat-menu-animasi-css3.html
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Menu Animasi CSS3 . Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
