06 мая2016

Анимированное выделение ссылок при наведении курсора

06 мая 2016. Категория: Магия CSS стилей

По умолчанию ссылка выделяется среди прочего текста не совсем привлекательным для глаза темно-синим цветом с простым подчеркиванием. При помощи магии CSS стилей её оформление можно значительно преобразить, добавив анимационный эффект при наведении курсора.

4 примера анимированного выделения ссылки при наведении курсора

Ехал Древнегрека через реку,
Видит Древнегрека - в реке рак.
Сунул руку Древнегрека в реку,
Рак за руку Древнегрека цап!

HTML разметка всех примеров

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

/* Разметка первых двух примеров */
<a href="#">1 и 2 пример</a>
/* Разметка третьего примера */
<a href="#" data-hover="3 пример">3 пример</a>
/* Разметка четвертого примера */
<a href="#"> <span data-hover="4 пример">4 пример</span></a>

CSS стили примера №1

a { line-height: 1; display: inline-block; text-decoration: none; color: #118EC7; }
a:after {
	height: 2px; /* Толщина линии подчеркивания */
	display: block; content: "";
	background-color: #118EC7; /* Цвет линии подчеркивания */
	margin-top: 2px; width: 0;
	transition: width .2s ease-in-out; /* Скорость появления/исчезновения линии */
	}
a:hover:after,
a:focus:after {width: 100%;}

CSS стили примера №2

Пример немного сложнее предыдущего из-за использования не одной, а сразу двух линий, которые будут разъезжаться от середины нижней части элемента к его краям.

a { display: inline-block; position: relative; text-decoration: none; color: #118EC7;}
a::before {
	display: block; position: absolute; width: 0; content: "";
	height: 2px; /* Толщина левой линии подчеркивания*/
	background-color: #FF002F; /* Цвет левой линии подчеркивания */
	/* Скорость появления/исчезновения левой линии */
	transition: width .2s ease-in-out, left .2s ease-in-out;
	left: 50%; bottom: 0;
	}
a::after {
	display: block; position: absolute;  width: 0; content: "";
	height: 2px; /* Толщина правой линии подчеркивания*/
	background-color: #118EC7; /* Цвет правой линии подчеркивания */
	transition: width .2s ease-in-out; /* Скорость появления/исчезновения правой линии */
	left: 50%; bottom: 0;
	}
a:hover::before { width:50%; left:0; }
a:hover::after { width:50%; }

CSS стили примера №3

a { text-decoration: none; color: #118EC7;}
a:hover { text-decoration: none; }
a:hover:before {
	-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	opacity: 1;
	}
a:before {
	color: #343434; /* Цвет "прилетающего" текста */
	position: absolute; opacity: 0;
	content: attr(data-hover); /* Определяет "прилетающий" текст */
	-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	/* Скорость появления/исчезновения "прилетающего" текста */
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
	}

CSS стили примера №4

a {
	overflow: hidden; vertical-align: bottom; display: inline-block; 
	position: relative; text-decoration: none;
	}
a span {
	position: relative; display: inline-block;
	/* Скорость появления/исчезновения "выезжающего" текста */
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	}	
a span:before {
	position: absolute; width: 100%;
	color: #343434; /* Цвет "выезжающего" текста */
	left: 0; top: 100%;
	content: attr(data-hover); /* Определяет "выезжающий" текст */
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
a:hover span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
	}