Всем хотелось бы больше внимания в социальных сетях, это как соревнование в популярности, и все борются за друзей и подписчиков. Если у вас получилось привлечь читателей на свой веб-сайт, было бы здорово, чтобы они еще и добавились в друзья и подписались на обновления в социальных сетях. Но как привлечь их внимания к этому? В большей части блогов значки социальных сетей находятся или справа сверху в шапке страницы, или справа снизу в подвале. Это самые распространенные места для ссылок на социальные сети. 

А как можно выделиться и привлечь внимание к вашим значкам, учитывая что сейчас значки есть буквально на каждом сайте?

Некоторые веб-сайты используют анимации CSS3 для значков социальных сетей, и нам кажется отличным решением такая небольшая демонстрация перед тем, как читатель перейдет на Вашу страницу в социальных сетях.

Можно встретить постоянно пульсирующие значки, созданные с помощью анимаций CSS, это интересное решение, но такие значки отвлекают внимание читателя от содержимого сайта. Но никогда не стоит отвлекать внимание от содержимого. А при этом использование анимаций CSS для привлечения внимания к чему-нибудь — отличная идея.

Нам показалось интересным вращение изображения при наведении на него указателя мыши, этот эффект необычный и запоминающийся, так что мы решили создать значки социальных сетей с таким эффектом.

Демонстрация работы вращающихся значков, созданных с помощью CSS3

В этом уроке мы расскажем, как использовать CSS для создания вращающихся при наведении указателя мыши значков социальных сетей, которые будут содержать ссылки на ваши страницы в социальных сетях.

Демонстрация работы

Код HTML 

Начнем со значков социальных сетей:

<div class="spinning_icons">
		<a href="http://www.twitter.com/paulund_" class="twitter" title="twitter">Twitter</a>
		<a href="http://www.twitter.com/paulund_" class="delicious" title="delicious">Delicious</a>
		<a href="http://www.twitter.com/paulund_" class="digg" title="digg">Digg</a>
		<a href="http://www.twitter.com/paulund_" class="dribbble" title="dribbble">Dribbble</a>
		<a href="http://www.twitter.com/paulund_" class="email" title="email">Email</a>
		<a href="http://www.twitter.com/paulund_" class="facebook" title="facebook">Facebook</a>
		<a href="http://www.twitter.com/paulund_" class="flickr" title="flickr">Flickr</a>
		<a href="http://www.twitter.com/paulund_" class="foursquare" title="foursquare">Foursquare</a>
		<a href="http://www.twitter.com/paulund_" class="linkedin" title="linkedin">Linkedin</a>
		<a href="http://feeds.feedburner.com/Paulundcouk" class="rss" title="rss">RSS</a>
		<a href="http://www.twitter.com/paulund_" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
		<a href="http://www.twitter.com/paulund_" class="youtube" title="youtube">YouTube</a>
	</div> 

Код HTML простой, он состоит из блока с ссылками на страницы социальных сетей. В этом примере использована ссылка на Twitter, вам нужно будет заменить ссылки на свои.

Код CSS3 

После создания кода HTML мы можем добавить код CSS, в котором мы зададим стили тегу a для класса spinning_icons (вращающиеся значки).

Значки социальных сетей будут заданы фоновыми изображениями для тега a, так что нам нужен класс для каждого из них, чтобы можно было выбрать соответствующий значок.

.spinning_icons a{
	width:48px;
	height:48px;
	display:inline-block;
	text-indent:-9999em;
	background-position:0 0;
	background-repeat:no-repeat;
	z-index:2000;
	overflow:hidden;
}

Здесь мы задали ширину и высоту тегу 48 пикселей, чтобы было достаточно места для показа значка. Мы добавили свойство display:inline-block;, чтобы значки расположились в ряд один за другим. У нас есть текст для каждой ссылки для поисковой оптимизации, но мы не хотим, чтобы он был виден, так как мы используем только значки, так что мы задаем отступ первой строки текста -9999em, чтобы оттолкнуть текст за пределы экрана. Мы также задаем фону отсутствие повторений и скрываем текст, выходящий за пределы блока.

Теперь можно добавить изображения классам:

.twitter{ background:url('icons/twitter_32.png'); }
.delicious{ background:url('icons/delicious_32.png'); }
.digg{ background:url('icons/digg_32.png'); }
.dribbble{ background:url('icons/dribbble_32.png'); }
.email{ background:url('icons/email_32.png'); }
.facebook{ background:url('icons/facebook_32.png'); }
.flickr{ background:url('icons/flickr_32.png'); }
.foursquare{ background:url('icons/foursquare_32.png'); }
.linkedin{ background:url('icons/linkedin_32.png'); }
.rss{ background:url('icons/rss_32.png'); }
.stumbleupon{ background:url('icons/stumbleupon_32.png'); }
.youtube{ background:url('icons/youtube_32.png'); } 

Теперь, когда у тегов a есть изображения, можно задать анимацию CSS, чтобы значки вращались, когда мы наводим на них указатель мыши. У нас вращается не только изображение, а вся ссылка с изображением на фоне:

.spinning_icons a:hover{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
	transition: transform 0.2s ease-out;
	-webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Для этого мы используем свойство трансформации CSS и задаем ссылке поворот на 360 градусов, чтобы анимировать это, мы добавляем переход, который изменит трансформацию и  запустит анимацию на 0,2 секунды.

Это весь код CSS, который нужен, чтобы привлечь больше внимания к Вашим значкам социальных сетей с помощью анимаций CSS для вращения значков при наведении на них указателя мыши.

Посмотрите демонстрацию работы, чтобы увидеть эффект в действии.

Демонстрация работы

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

• Анимированные полосы загрузки с использованием CSS3 и фонов SVG 
• Создание улучшенного переключателя с использованием CSS3 
• Создание ярлыков с использованием CSS для добавления пометок содержимому