Социальные иконки с эффектом вращения
Социальные иконки с эффектом вращения-имеют шестиугольную форму,необычную,чаще встречаются либо круглые,либо квадратные,но такой формы впервые,поэтому что бы выделять свой сайт среди остальной серой массы можно использовать этот скрипт,к тому же в этом скрипте при наведении иконки вращаются
Установка:По месту расположения
В CSS
Установка:По месту расположения
Код
<div id="social" class="social">
<a target="_blank" rel="nofollow" href="http://vk.com">
<img border="0" src="/soc_icons/vk.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://odnoklassniki.com">
<img border="0" src="/soc_icons/o.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://fb.com">
<img border="0" src="/soc_icons/fb.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://twitter.com">
<img border="0" src="/soc_icons/t.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://plus.google.com">
<img border="0" src="/soc_icons/gp.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://linkedin.com">
<img border="0" src="/soc_icons/in.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://livejournal.com">
<img border="0" src="/soc_icons/lj.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://youtube.com">
<img border="0" src="/soc_icons/yt.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="#">
<img border="0" src="/soc_icons/rss.png"style="margin-right: 1px;" /></a>
</div>
<a target="_blank" rel="nofollow" href="http://vk.com">
<img border="0" src="/soc_icons/vk.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://odnoklassniki.com">
<img border="0" src="/soc_icons/o.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://fb.com">
<img border="0" src="/soc_icons/fb.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://twitter.com">
<img border="0" src="/soc_icons/t.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://plus.google.com">
<img border="0" src="/soc_icons/gp.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://linkedin.com">
<img border="0" src="/soc_icons/in.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://livejournal.com">
<img border="0" src="/soc_icons/lj.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://youtube.com">
<img border="0" src="/soc_icons/yt.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="#">
<img border="0" src="/soc_icons/rss.png"style="margin-right: 1px;" /></a>
</div>
В CSS
Код
#social img {
-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;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.social {text-align: center;margin: 10px;}
-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;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.social {text-align: center;margin: 10px;}
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: Turbo
Комментарии (0)