Простые Эффекты при наведении курсора на значок

Дата05 Июн 16 в 05:34
Категория Скрипты для uCoz

Чтобы скачать, войдите или зарегистрируйтесь.

Ряд простых круглых значков с переходами CSS и анимаций для Вашего вдохновения.

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

Переходим к установке.

В то место где хотим видить иконки вставляем следующий код:

Код

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
  <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
  <a href="#" class="hi-icon hi-icon-screen">Desktop</a>
  <a href="#" class="hi-icon hi-icon-earth">Partners</a>
  <a href="#" class="hi-icon hi-icon-support">Support</a>
  <a href="#" class="hi-icon hi-icon-locked">Security</a>

Теперь добавим нашим иконкам соответствующие стили и запишем их в нашу таблицу стилей CSS

Код

.hi-icon-effect-6 .hi-icon { box-shadow: 0 0 0 4px rgba(255,255,255,1); transition: background 0.2s, color 0.2s; }

.no-touch .hi-icon-effect-6 .hi-icon:hover { background: rgba(255,255,255,1); color: #64bb5d; }

.no-touch .hi-icon-effect-6 .hi-icon:hover:before { animation: spinAround 2s linear infinite; }

@keyframes spinAround {
from { transform: rotate(0deg) }
to { transform: rotate(360deg); }
}

Источник Codrops