Menu Animasi CSS3












Pengen Seperti di atas ??? gampang kok ...

Copas kode berikut di HTML/Javascript.

<style type="text/css">
    .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://www.blogger.com/post-create.g?blogID=7926620735885178065#">Home</a></li>
<li class="menuqu2"><a href="http://www.blogger.com/post-create.g?blogID=7926620735885178065#">Menu1</a></li>
<li class="menuqu1"><a href="http://www.blogger.com/post-create.g?blogID=7926620735885178065#">Menu2</a></li>
<li class="menuqu1"><a href="http://www.blogger.com/post-create.g?blogID=7926620735885178065#">Menu3</a></li>
<li class="menuqu2"><a href="http://www.blogger.com/post-create.g?blogID=7926620735885178065#">Menu4</a></li>
<li class="menuqu1"><a href="http://www.blogger.com/post-create.g?blogID=7926620735885178065#">Menu5</a></li>
</ul>
</div>

 Ganti Dengan Masing2 Kebutuhan anda ...

Klik Save.


Responses

2 Respones to "Menu Animasi CSS3"

Zh!nTho mengatakan...

wah keren nih boleh jg


30 November 2011 09.13
~Sofyan_oZ~ mengatakan...

sip bro , smoga bermanfaat ya artikel2 saya ... jangan lupa bro klik like nya :D ....


30 November 2011 09.18

Posting Komentar

•Sangat Saya Hormati Jika Anda Meninggalkan Komentar di Blog ini

•Mohon Maaf Blog ini Tidak Terima Komentar yang Mengandung Sara , Spamming , Flamming

•Kritik Dan Saran Dari Pembaca Semoga Bisa Membantu Memajukan Blog Ini

Regards : ~Sofyan_oZ~

 

Statistic Blog's



Free Page Rank Tool
Return to top of page Copyright © 2012 Always-Sharing | Blogspot Tutorial | From Zero To Hero | Template by HackTutors