Техно-мир

Эта статья расскажет вам, как простой это, создать анимированные социальные иконки используя только CSS3.Изображения для социальных социальных иконок используемых в этой статье, находились в Интернете как бесплатные иконки и использовались только в демонстрационных целях. Они могут быть заменены любыми другими иконками.Давайте начнем со структуры HTML. Каждое изображение иконки — ссылка с двумя изображениями внутри. Первое изображение — черно-белая. Вторая — цветная. Так, если Вы соберетесь использовать свои собственные изображения, то Вы должны будете сделать две версии (черно-белая версия и окрасить версию). Чтобы сделать это, Вы можете использовать любое программное обеспечение для обработки изображений (графический редактор). Также у всех изображений для всех символов должны быть одинаковые размеры.Вот пример HTML кода для пяти социальных иконок:

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

Когда пользователь наводит курсор на символ, первое изображение исчезает, и второе появляется. Это достигнуто, при помощи CSS margin-top для первого изображения.

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

a {
  overflow: hidden;
  height: 64px;
  -webkit-transition: all linear 200ms;
  -moz-transition: all linear 200ms;
  -o-transition: all linear 200ms;
  transition: all linear 200ms;
}

a img {
  border: none;
  display: block;
}

a img:first-child {
  margin-top: 0;
  -webkit-transition: all linear 200ms;
  -moz-transition: all linear 200ms;
  -o-transition: all linear 200ms;
  transition: all linear 200ms;
}

a:hover img:first-child {
  margin-top: -64px;
}

a:hover {
  -webkit-box-shadow: 0 0 6px #000000;
  -moz-box-shadow: 0 0 6px #000000;
  box-shadow: 0 0 6px #000000;
}

Вы можете изменять только два параметра по своему усмотрению:

height: 64px; и margin-top: -64px;

Вы должны изменить эти два значения в случае, если Вы собираетесь использовать другие размеры изображения социальных иконок, чем используемые в этой статье (64×64 pixels).

Для особо ленивых, залил готовые иконки в архив!

Вернуться назад