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