Шаблони для 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_gdU6gC1j1AfLVpcbmXLHwE7sXqMujpiP-6FNjeecL1YjSWkgWqku9ObOFD4NnUxolUPAtC0YAdJ0IJnmlZi2OHvrfCnvTWjKsDI3165UjDtQ3Q4utBAYee0ULHOV3iTrqAWbjKjNfYs/s320/facebook.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://google.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis41a945DlJvjCaiG-wP8r6FoOTAyqOoFAJN6S_BYFJWV3qrAB7rzrLZVYaeHv5ydD2V6i4PY_RI12s3BukPpo1KoniZt4kedY5ittqr7p5gO8tuE4aT_BWuzQtuD_t_SA6CRpdOvsfGo/s320/google_plus.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://instagram.png">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3BVB-jBD6a_HDYXLgPTFrrMaTt9VGMPukOO0j-0dXwey-T8QpGgA6I-gUJ_fQVGFqXtO73wwxdjPLJYvILIWQ1XngRwuMiYQJMvP1JCwdoQ689wO_tfbkbqSkc_PzewWZSKzIJxRD-4/s320/instagram.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://linkedin.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-KbNo9KPJyBIStaPefam5cFniBuVRlnj028PHVElfmoJ1kvxWKkWIztWQ9fmOdxzadWXHRD6MSrAtdVDGtpEE3ANQM0u2yojxt0qBDgmyBTzLy81mhNLDlw27PIk7IQwSrSdYCZ5U7dc/s320/linkedin.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://gmail.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHj7xeHRp9BxmziUW0N3jJjpVZM4SB0B5NEYojnHe_ntt2CcvVB-5v_I9L_XDI5z6Lb5_vEvU7_iOzSfq5Fc9zbVw11WYUY2nHH_ETUfAj4K1xjRCAMSrLUeMuCCDQ3iOCk1j90oJ57_0/s320/mail.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://odnoklassniki.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8DSXjwWZhSz4GCwF41O8PVsR_l_-1dKnT2R0JnR9y7yucxWo8nXHtE0eFPrhgiq-OhS7y-Dt6m82lHJtShQPHU5JYY2z6QLzceJTeG9cuM04veHVRZrsmqYRMD1_hMeBVqyqp8pNo1c/s320/odnoklassniki.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://feedburner.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKLOdJA6B79XVlp39RwhpfNu1U-fhoUR-7gnoas6KAwC8EFg397TFEO4WB6AX6V48aIDSOzKvSR2iicrViGjhq59wh-1rMxzuraAYoqWR66RkjGNrm85ApOe5j7yy089gXWnIdsyp4Ns/s320/rss.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://vk.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HNnACM3MbBhu0cPxcTsLjSCwo3Cr5cYzmLy9yXRFmN7hQ6oT4IZzbTcGph4Du3mJHfp8se54H94JfRSYPdsYNzE6iLYCoZ99QOdrgxLpJLFJpbMJt4OJxLhoC0jEynsudgH8f1ywLQM/s320/vk_2.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://youtube.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVolMJ1UkVsy9AoIcMVDkoTFzZhcQpQaca98zpDkY7SbrK0yNHoh_lmnA7pd49VGK00ssrRmuskmM6_BbQzk0ohLkz2aNLE89IDHIYVRGStAMYIKl2aQ3_T6drMpd2XfBKwFdtuirkyio/s320/youtube_2.png"style="margin-right: 1px;" /></a>
</div>

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

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



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

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

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

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

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

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

    ВідповістиВидалити


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