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

Устанавливается и используется очень легко

ДЕМО 

СКАЧАТЬ 

код html выглядит следующим образом

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