Иконки социальных сетей сейчас присутствуют на любом сайте, будь то магазин, блог, форум или даже лендинг. Привлечь дополнительное внимание можно оригинальным эффектом при наведении.
Предоставляю вашему вниманию вращающиеся иконки соц. сетей, давненько ни чего не выкладывал, так что ловите. Сами же иконки вы можете заменить на свои, опять же таки при желании и умении работы с фотошоп.
По месту расположения ставим код:
Код
<ul id="social" class="group"> <li class="twitter"><a href="/"><span></span>twitter</a></li> <li class="dribbble"><a href="/"><span></span>dribbble</a></li> <li class="lastfm"><a href="/"><span></span>last.fm</a></li> <li class="spotify"><a href="/"><span></span>Spotify</a></li> <li class="ember"><a href="/"><span></span>ember</a></li> <li class="inspectelement"><a href="/"><span></span>Inspect Element</a></li> </ul>
Стили:
Код
li a span { background: url(images/sprite.png) no-repeat; display: block; width: 30px; height: 32px; position: relative; z-index: 10; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; } li a:hover span { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); }
Спрайт можно скачать ниже.
0
