Tutorial Blog Sederhana: Spinning Icons

-->

CSS

Spinning Icons

S

ebagai contoh anda bisa lihat di sini:DEMO
Cara Membuatnya:
Cari kode ]]></b:skin>
Copas code css dibawah ini dan letakkan diatas nya

<style type="text/css"> p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }  p#socialicons img:hover{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }  p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */ -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }  p#socialicons2 img:hover{ -moz-transform: rotate(70deg); -webkit-transform: rotate(70deg); -o-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg); }  p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */ }  p#socialicons3 img:hover{  -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } </style><br /> <br /> <b>pemutaran 360 derajat</b></p><br /> <p id="socialicons"><a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><br /> <a href="http://www.dynamicdrive.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a><br /> </p><br /> <p><b>pemutaran 60 derajat</b></p><br /> <p id="socialicons2"><a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><br /> <a href="http://www.dynamicdrive.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a><br /> </p><br /> <p><b>pemutaran -360 derajat</b></p><br /> <p id="socialicons3"><a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><br /> <a href="http://frogstomps.blogspot.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><br /> <a href="http://www.dynamicdrive.com/"><br /> <img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a><br /> </p>

Contoh Penerapan nya:

<b>pemutaran 360 derajat</b></p>

<p id="socialicons">
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a>
</p>

<p>
<b>pemutaran 60 derajat</b></p>

<p id="socialicons2">
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a>
</p>

<p>
<b>pemutaran -360 derajat</b></p>

<p id="socialicons3">
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a>
<a href="http://frogstomps.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a>
</p>

Selamat Mencoba

Subscribe to: Post Comments (Atom)

;