Творческие Link эффекты

Вдохновляющие коллекции экспериментальных эффектов связывают главным образом с использованием переходов на псевдо-элементах.
Сегодня мы хотели бы поделиться некоторыми экспериментальныvb и творческиvb эффекты для оформления ссылок с Вами. Идея состоит в том, чтобы использовать псевдо-элементы и анимировать их, чтобы создать изысканный и современный эффект. В примерах мы используем переходы при наведении, но вы также можете изменить эти эффекты на клик или для начальной анимации.
Пожалуйста, обратите внимание, что псевдо-элемент переходы работают не во всех браузерах.Лучше смотреть в Chrome и Firefox.
В большинстве случаев HTML достаточно прост:

<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>

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

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

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

Пожалуйста, обратите внимание, что браузер IE10 не поддерживает transform-style: preserve-3d , свойства, которые используются в некоторых примерах. Поскольку мы не можем проверить его еще с помощью Modernizr вы можете попробовать использовать один из предлагаемых решений для обнаружения IE10.

Надеюсь, вам понравились эти эффекты!

Посмотреть демо / Скачать исходники

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