Вращающиеся иконки
Эффект вращения социальных иконок с помощью CSS свойства transform. В Opera не работает, но порадует пользователей других браузеров.
<img alt=”” border=”0″ src=”https://m-primahtarsk.ru/kod/vrashhajushhiesja_ikonki.jpg” />
HTML разметка
<ul id=’social’ class=’ group’>
<li class=’twitter’><a href=’http://twitter.com/#!/pcvector’><span></span>twitter</a></li>
<li class=’dribbble’><a href=’http://dribbble.com/’><span></span>dribble</a></li>
<li class=’lastfm’><a href=’http://www.last.fm/’><span></span>last.fm</a></li>
<li class=’spotify’><a href=’http://open.spotify.com/’><span></span>Spotify</a></li>
<li class=’ember’><a href=’http://emberapp.com/’><span></span>ember</a></li>
<li class=’inspectelement’><a href=’http://inspectelement.com’><span></span>Inspect Element</a></li>
</ul>
CSS
Реализация иконок осуществлена с помощью спрайтов. Основной акцент в CSS сделан на свойствах transform и transition:
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);
}
2,652 просмотров всего, 2 просмотров сегодня
