Простые эффекты при наведении на иконки


Сегодня мы хотим поделиться с вами простеньким эффектом при наведении на иконку. Суть заключается в том, чтобы создать незначительный, но стильный эффект при помощи CSS-переходов и анимаций для анкоров и их псевдо-элементов. Для создания иконок мы воспользуемся иконическим шрифтом (Eco Ico от Matthew Skiles, созданным при помощи IcoMoon), которые мы добавляем посредством псевдо-класса :before.

Простые эффекты при наведении на иконки

Примечание: этот эффект будет работать только в тех браузерах, где имеется поддержка соответствующих 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>
</div>

 

ПОЛЕЗНО  Responsive HTML5 Youtube Video Embed

Пример эффекта при наведении заключается в простом вращении псевдо-элемента для иконки:

.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);
}
}

 

Учтите, что пунктирная граница круглого псевдо-элемента (border-radius: 50%) не будет работать в FF 21.0 (эффект 4).

Посмотреть демо | IconHoverEffects

источник Простые эффекты при наведении на иконки.