Animasi CSS Super Keren 2013 (menu horizontal)

Membuat navigasi horizontal yang penuh animasi mememang sangat menyenangkan. Yuk kita langsung saja nikmati sensasinya.

demo silahkan masuk DISINI lihat bagian atas sendiri

Langsung saja tutorilnya kita simak sob.....
Silahkan ambil kode CSS animasi dibawah ini dan letakkan diatas ]]></b:skin> lalu save template

<br /> .GRsuperAnima{<br /> position:relative;<br /> margin:15px 0 0 10px;<br /> overflow:hidden; <br /> margin:0; <br /> float:left;<br /> padding:0;<br /> background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);<br /> }<br /> ul#superAnima{ <br /> width:599px;<br /> margin:10px 0 20px; <br /> padding:0; <br /> margin:3px 4px 3px 4px;<br /> clear:both;<br /> float:left;<br /> }<br /> ul#superAnima li{<br /> margin:0; <br /> padding:0; <br /> overflow:hidden; <br /> float:left; <br /> height:40px; <br /> }<br /> ul#superAnima li a.anima{<br /> padding:10px 10px;<br /> font:10px Arial; <br /> float:left; <br /> color:white;<br /> text-decoration:none;<br /> text-transform:uppercase;<br /> text-shadow:1px 1px 1px #000;<br /> clear:both;<br /> height:18px;<br /> line-height:20px; <br /> background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x; <br /> text-align:center;<br /> transition:all 1.2s ease-in-out;<br /> -o-transition:all 1.2s ease-in-out;<br /> -moz-transition:all 1.2s ease-in-out;<br /> -webkit-transition:all 1.2s ease-in-out; <br /> -ms-transition:all 1.2s ease-in-out; <br /> font-weight:bold; <br /> border:1px solid #999;<br /> } <br /> ul#superAnima li a.anima:hover{<br /> transform:scale(1.0) rotate(0deg) translate(0, -40px);<br /> -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);<br /> -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px); <br /> -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);<br /> -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);<br /> } <br /> ul#superAnima li a.anima span{<br /> padding:10px 9px; <br /> color:transparent; <br /> opacity:0.2;<br /> filter:alpha(opacity=20);<br /> border:2px solid transparent;<br /> transition:all 1.6s ease-out;<br /> -o-transition:all 1.6s ease-out; <br /> -moz-transition:all 1.6s ease-out;<br /> -webkit-transition:all 1.6s ease-out; <br /> -ms-transition:all 1.6s ease-out; <br /> transform:scale(8.0) rotate(0deg) translate(0,-10px);<br /> -o-transform:scale(8.0) rotate(0deg) translate(0,-10px); <br /> -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);<br /> -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);<br /> -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);<br /> } <br /> ul#superAnima li a.anima span:hover{ <br /> opacity:1.0;<br /> filter:alpha(opacity=100);<br /> padding:4px 9px; <br /> height:18px;<br /> transform:scale(1.0) rotate(0deg) translate(0,0);<br /> -o-transform:scale(1.0) rotate(0deg) translate(0,0);<br /> -moz-transform:scale(1.0) rotate(0deg) translate(0,0);<br /> -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);<br /> -ms-transform:scale(1.0) rotate(0deg) translate(0,0);<br /> color:#FF0; <br /> border:2px solid #000;<br /> background:#555; <br /> text-shadow:1px 1px 1px #000;<br /> box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;<br /> border-radius:4px; <br /> }<br /> ul#superAnima li{<br /> border:1px solid transparent;<br /> background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);<br /> } <br /> ul#superAnima li:hover{ <br /> background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif); <br /> border:1px solid #777;<br /> }<br />

Kemudian ambil pemanggilnya dibawah ini silahkan ditaruh dimana aja, sesuai kesukaan sobat semua
<br /> <div class="GRsuperAnima"> <br /> <ul id="superAnima"> <li><a class="anima" href="#">Tutorial BloGGeR<br /> <br /> <span>Tutorial BloGGeR</span></a></li> <li><a class="anima" href="#">Home<br /> <br /> <span>Home</span></a></li> <li><a class="anima" href="#">jQuery<br /> <br /> <span>jQuery</span></a></li> <li><a class="anima" href="#">CSS3<br /> <br /> <span>CSS3</span></a></li> <li><a class="anima" href="#">Adobe<br /> <br /> <span>Adobe</span></a></li> <li><a class="anima" href="#">Image Gallery<br /> <br /> <span>Image Gallery</span></a></li> </ul> <br /> </div> <br />

Sekarang tinggal sobat kreasikan warna dan lain sebagainnya, sekian dan semoga postingan ini bermanfaat untuk sobat semua. amiinn