Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
Вращающиеся иконки на CSS3

Вращающиеся иконки на CSS3

Украшения 2017-Апр-22 rucoz 106 2 2

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

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

По месту расположения ставим код:

Код
<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);  }

Спрайт можно скачать ниже.

Источник: http://pcvector.net/scripts/buttons_and_icons/153-vraschayuschiesya-ikonki.html
2 комментария
avatar
1
Один вопрос!
Куда это все вставлять? Имею ввиду в какой блок?
avatar
0
2
HTML разместите в нужном месте (в футере, в сайдбаре, то есть там, где хотите эти иконки отобразить). А стили в Таблицу стилей CSS:

avatar