Креативные hover эфекты

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

 

ДЕМО

ИСХОДНИКИ

 

 

 

 

В большинстве случаев HTML - это просто nav с якоря:

<nav class="cl-effect-13">
    <a href="#">Beleaguer</a>
    <a href="#">Lassitude</a>
    <a href="#">Murmurous</a>
    <a href="#">Palimpsest</a>
    <a href="#">Assemblage</a>
</nav>

Но для некоторых специальных эффектов мы можем использовать данные для атрибута повторяя Текст ссылки в псевдо-элемент:

<nav class="cl-effect-11">
    <a href="#" data-hover="Desultory">Desultory</a>
    <a href="#" data-hover="Sumptuous">Sumptuous</a>
    <a href="#" data-hover="Scintilla">Scintilla</a>
    <a href="#" data-hover="Propinquity">Propinquity</a>
    <a href="#" data-hover="Harbinger">Harbinger</a>
</nav>

Мы хотим добавить перспективу для каждого пункта или достижения другого эффекта.

<nav class="cl-effect-10">
    <a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
    <a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
    <a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
    <a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
    <a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>

Пример для эффекта заключается в следующем стиле. Он позиционирует псевдо-элемент на сам текст ссылки и при наведении курсора мыши, исчезает путем масштабирования его (как в структуре второго блока HTML):

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	text-shadow: none;
}

.cl-effect-15 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	transform: scale(0.9);
	opacity: 0;
}

Мы надеемся, что эта коллекция дает вам некоторое вдохновение для создания своих проектов.

Материал взят из зарубежного источника - tympanus.net/codrops/2013/08/06/creative-link-effects и представлен исключительно в ознакомительных целях.

---