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

Опубликовано: 01.09.2018

видео Интересный hover эффект

Эффекты при наведении (изменение языка текста в абзаце) :hover снова чудит!! HTML, CSS.

Сегодня мы хотим поделиться с вами некоторым простым 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 эффекта используя псевдоэлемент на иконке


Интересная верстка: hover-эффект из windows 10

.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

Похожие записи

Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?

Свяжитесь со мной
rss