• Страница 1 из 1
  • 1
Анимационные иконки при помощи стиля CSS3
Kentos311Дата: Среда, 10.01.2018, 01:34 | Сообщение # 1
Сообщений: 729
Статус:

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

Установка:

1. В таблицу стилей CSS:
Код
li a span { background: url(http://mir-hack.ru/ucoz/daspunter.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. В контейнер, либо туда где хотите их видеть:
Код
<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>
Прикрепления: 6439452.gif (133.7 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: