Site icon Vavik96

Простые Hover-эффекты для иконок

admin

Набор простых круглых иконок с 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]

Оригинал / Перевод

Exit mobile version