Шаблони для Blogger

Віджети для Blogspot

Post Page Advertisement [Top]

Иконки социальных сетей с эффектом при наведении

11 коммент.

Социальные сети , HTML & CSS


И снова здравствуйте! Осталось несколько часов к решающему матчу для сборной Португалия против команды США, но чтобы время не терять опубликую запись, которая уже два месяца "валялась" в черновиках.

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


Итак, сегодня мы поработаем с эффектом вращения изображения на 360* градусов. Для этого используется свойство для hover transform: rotate(360deg).

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;
}
/* Поворот на 360 градусов при наведении курсора*/
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Чтобы не прописывать эффект каждому изображению, мы просто заключаем все картинки в отдельный div.

HTML:
<div id="social">
<a target="_blank" rel="nofollow" href="https://facebook.com">
<img border="0" src="https://3.bp.blogspot.com/-0KyMme_T5lc/U6cUk9eMKJI/AAAAAAAAIAo/_in4gv6I9To/s320/facebook.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://google.com">
<img border="0" src="https://3.bp.blogspot.com/-6kC_GqGGU-Q/U6cUlKraBxI/AAAAAAAAIAw/lw7-ybo7c6w/s320/google_plus.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://instagram.png">
<img border="0" src="https://4.bp.blogspot.com/-v6GSE7a-vrQ/U6cUlBrZF-I/AAAAAAAAIAs/uz3l6_qBRoI/s320/instagram.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://linkedin.com">
<img border="0" src="https://4.bp.blogspot.com/-IeAVfKPKuBY/U6cUmA9FWJI/AAAAAAAAIBk/uclglLdXHTQ/s320/linkedin.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://gmail.com">
<img border="0" src="https://3.bp.blogspot.com/-fBiHKhWCmLk/U6cUmSZfQyI/AAAAAAAAIA0/wiV0VeAbq2U/s320/mail.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://odnoklassniki.com">
<img border="0" src="https://1.bp.blogspot.com/-ZbPa__BooLQ/U6cUm2V6PWI/AAAAAAAAIA4/455nadQNWQo/s320/odnoklassniki.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://feedburner.com">
<img border="0" src="https://1.bp.blogspot.com/-gTCZnmn2BmA/U6cUnglijuI/AAAAAAAAIBI/zoYV_G8QQNk/s320/rss.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://vk.com">
<img border="0" src="https://2.bp.blogspot.com/-Pz8f3J8FQH8/U6cUn1RF9eI/AAAAAAAAIBE/nFMVP_uNmrM/s320/vk_2.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://youtube.com">
<img border="0" src="https://1.bp.blogspot.com/-a4x7q0UPv5o/U6cUpL9-SkI/AAAAAAAAIBU/x7mljlo1SCI/s320/youtube_2.png"style="margin-right: 1px;" /></a>
</div>

Очень круто смотрится этот эффект на круглых иконках. Для этого просто сделайте или найдите круглые иконки социальных сетей и поменяйте адреса на них. Посмотрите, что выйдет!

Кстати, не забудьте поменять ссылки на ваши профили ;)
На этом, всем приятного вечера и окончания выходных! Свои вопросы оставляйте в комментах ниже!. До встречи ;)



11 комментариев:

  1. Анонимный29 июня, 2014 11:31

    Очень круто! Огромное спасибо, Игорь.

    ОтветитьУдалить
  2. Супер! Огромное СПАСИБО!
    Была проблема с кнопками, хотелось их "оживить", вариантов много, но чтобы так! Пару строчек кода и готово!

    ОтветитьУдалить
  3. не получается
    я просто вставляю текс, картинки появляются но не крутятся, а верхний текс просто текстом высвечивается

    ОтветитьУдалить
    Ответы
    1. сейчас разберемся ;)
      куда вставляете? иожете сделать скриншот?

      Удалить
  4. Подскажите, куда вставлять код

    ОтветитьУдалить
    Ответы
    1. В нужном месте, в исходном коде страницы.

      Удалить


Також може зацікавити ��