Интересный hover эффект

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

Создадим разметку, и поместим список иконок в контейнер

<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>

Пример простого вращения для hover эффекта используя псевдоэлемент на иконке

.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;
}</pre>
@keyframes spinAround {
 from {
 transform: rotate(0deg)
 }
 to {
 transform: rotate(360deg);
 }
}

Надеюсь вам понравятся эффекты, и вы найдете их вдохновляющими.

Демо Скачать

По мотивам tympanus.net

Один комментарий к “Интересный hover эффект”

Сергей ·

03.09.2013 в 20:20

#

Довольно интересный эффект получается! Спасибо, было интересно изучить материал.

Ответить

Оставить отзыв

Нажмите чтобы отменить ответ

Имя (required)

E-mail (required)

Веб сайт

Your Comment