< >
القائمة إغلاق

ايقونات المشاركات بخاصيه css3

السلام عليكم ورحمة الله تعالى وبركاته.. مرحباً بكم جميعاً زوار مدونة عشق الحياة…
موضوعنا اليوم هو اضافه ايقونات جديدة للمشاركات الاجتماعيه على الانترنيت بخاصيه css3 …..اكثر من رائعة المتحركة.. تابع الشرح..
أولا نذهب الى ..
تصميم _
عناصر الصفحه –
اداة HTML/JavaScript
ثم نضيف الاكواد التاليه :
 
الشكل الاول :

<style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger */    -moz-transition: all 0.4s ease-in-out;    -webkit-transition: all 0.4s ease-in-out;    -o-transition: all 0.4s ease-in-out;    -ms-transition: all 0.4s ease-in-out;    transition: all 0.4s ease-in-out;}p#hb_socialicons img:hover {    -moz-transform: rotate(120deg);    -webkit-transform: rotate(120deg);    -o-transform: rotate(120deg);    -ms-transform: rotate(120deg);    transform: rotate(120deg);}/* Spinning Social Icons Widget By HelperBlogger */</style>  <center><p id=”hb_socialicons”>    <a href=”http://www.facebook.com/btsnts/”><img border=”0″ src=”http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png” /></a>    <a href=”http://www.twitter.com/helperblogger/”><img border=”0″ src=”http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png” /></a>    <a href=”https://plus.google.com/u/0/106527290580119996124″><img border=”0″ src=”http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png” /></a>    <a href=”http://www.feeds.feedburner.com/hblogger/”><img border=”0″ src=”http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png” /></a>    <a href=”http://www.youtube.com/helperblogger1/”><img border=”0″ src=”http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png” /></a></p></center>

الشكل الثاني,,

<style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger */    -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#hb_socialicons img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} /* Spinning Social Icons Widget By HelperBlogger */</style>     <center><p id=”hb_socialicons”>    <a href=”http://www.facebook.com/btsnts/”><img border=”0″ src=”http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png” /></a>    <a href=”http://www.twitter.com/helperblogger/”><img border=”0″ src=”http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png” /></a>    <a href=”https://plus.google.com/u/0/106527290580119996124″><img border=”0″ src=”http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png” /></a>    <a href=”http://www.feeds.feedburner.com/hblogger/”><img border=”0″ src=”http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png” /></a>    <a href=”http://www.youtube.com/helperblogger1/”><img border=”0″ src=”http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png” /></a></p></center>

الشكل الثالث..

<style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger */    -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#hb_socialicons img:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);} /* Spinning Social Icons Widget By HelperBlogger */</style>     <center><p id=”hb_socialicons”>    <a href=”http://www.facebook.com/btsnts/”><img border=”0″ src=”http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png” /></a>    <a href=”http://www.twitter.com/helperblogger/”><img border=”0″ src=”http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png” /></a>    <a href=”https://plus.google.com/u/0/106527290580119996124″><img border=”0″ src=”http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png” /></a>    <a href=”http://www.feeds.feedburner.com/hblogger/”><img border=”0″ src=”http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png” /></a>    <a href=”http://www.youtube.com/helperblogger1/”><img border=”0″ src=”http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png” /></a></p></center>

 
هذا كل شيئ دمتم بخير,, 
أي ملاحظة لا تتردد في تركها بتعليق

Views: 0

هل اعجبتك المقالة شاركنا رأيك