Lecaw

Учимся создавать Web-сайты

Hover эффекты иконок

May 31, 2013
CSS
485hits

Сегодня я хочу поделиться некоторыми простыми hover эффектами при наведении для иконок. Идея состоит в том, чтобы создать тонкий и стильный hover эффект, используя CSS переходы и анимацию с псевдо-элементами. Для иконок мы используем шрифт (Eco Ico by Matthew Skiles, созданный при помощи приложения IcoMoon), который мы устанавливаем при помощи псевдо-класса :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;
}
 
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

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

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий