Набор простых круглых иконок с CSS Hover-эффектом переходов и анимациq для вашего вдохновения.
Сегодня мы хотим поделиться с вами несколькими простыми эффектами для иконок. Идея состоит в том, чтобы создать необычный и стильный эффект с помощью CSS на якорях и их псевдо-элементах. Для иконок мы используем шрифт ( Eco Ico Мэтью Скайлс , созданный с приложением IcoMoon ), который мы добавляем с помощью псевдо-класса.
Пожалуйста, обратите внимание: эффекты работают только в тех браузерах, которые поддерживают соответствующие свойства 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>
В этом примере эффекта можно добиться простым вращением псевдо-элемента для значка:
.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);
}
}
Обратите внимание, что пунктирная граница псевдо-элемента (граница радиуса: 50%) не работает в FF 21.0 (эффект 4)
Я надеюсь, вам понравятся эффекты и они вас вдохновят!
[su_button url=»http://tympanus.net/Development/IconHoverEffects/» style=»3d» background=»#D70000″ size=»2″ radius=»5″ icon=»icon: arrow-right» text_shadow=»2px 2px 2px #000000″ desc=»Посмотреть демо»]Посмотреть демо[/su_button] [su_button url=»http://tympanus.net/Development/IconHoverEffects/IconHoverEffects.zip» style=»3d» background=»#D70000″ size=»2″ radius=»5″ icon=»icon: arrow-right» text_shadow=»2px 2px 2px #000000″ desc=»Скачать исходники»]Скачать исходники[/su_button]