Hey brother!!! haha.... jumpa lagi neh ==" kali ini gue mau share tentang efek animasi bro.. yang mau ikutan share with me jangan ragu berkomentar ya.. efek animasi didunia blog ini banyak sekali macamnya, dan semuanya itu hanya barang lama alias kadaluarsa.. tergantung kitanya.. Mau cari or diam saja.. Nah... loh.. makannya jangan males2 bro ==" efek yang sering gue gunakan pada blog ini adalah transition.. efek itu berguna untuk memberi timing agak lambat pada perubahan bentuk maupun ukuran objek yang akan kita ubah2..
Script:
-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;
Hanya dengan script diatas kita bisa berkreasi semau kita..
contoh dengan script berikut:
CSS
<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 20px 0.50em; text-decoration: none; float: left; color: white; background: transparent; border: 2px solid white;border-radius:5px;top:0px;box-shadow:0 0 5px lime; 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: 20px 0.50em; text-decoration: none; float: left; color: white; background: transparent; border: 2px solid white;border-radius:5px;top:0px;box-shadow:0 0 5px lime; 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{border:2px dashed #000000;background:#fff; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg):-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-box-shadow: 0 0 18px #FF0000 ;
-webkit-box-shadow: 0 0 18px #FF0000 ;
}
</style>
HTML
<div class="menuqu">
<ul>
<li class="menuqu1"><a href='URL'target="_blank">Home</a></li>
<li class="menuqu2"><a href='
URL 'target="_blank">Daftar Isi</a></li>
<li class="menuqu1"><a href='
URL 'target="_blank">Buku Tamu</a></li>
<li class="menuqu1"><a href='
URL 'target="_blank">Link Exchange</a></li>
<li class="menuqu2"><a href="
URL " rel="author">About Me</a></li>
</ul>
</div>
JADINYA AKAN SEPERTI INI:
Mari kita tinjau lebih jauh
Pada CSS diatas menuqu1 dan menuqu2 adalah bentuk mula-mula.. dengan menggunakan script rotate membuat item tersebut menjadi miring (berotasi).. border solid white..
menuqu1, menuqu2: hover adalah script dimana saat kita mengarahkan kursor ke item tersebut.. pada bagian ini rotate menjadi 0deg atau nol derajat, membuat item keposisinya semula saat terkena kursor.. dan border menjadi dashed..
So ==" semua ini tergantung pada kreatifitas kalian semua, selamat mencoba ya bro.. (^0^)
Suka dengan postingan ini.?
Ditulis Oleh : asdharsyaputra di label Trik Blogger : Facebook Aku
Artikel Sedikit Tentang Animasi Transisi ini ditulis oleh asdharsyaputra pada hari Sabtu, 30 Juni 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Sedikit Tentang Animasi Transisi dapat Anda sampaikan melalui kotak komentar dibawah ini. Dan jangan lupa di like yea kawan. Terima Kasih...
Backlink Please !
| URL |
| Code For Forum |
| HTML Code |
Di Like Dulu Gan Sebelum Pergi..!!
Kritik Dan Saran Sobat Sangat Membantu Blog ini Dalam Menulis Artikel Berikutnya
Nama : Asdhar Syaputra