Эффект прилетающей тени для ссылок

Эффект прилетающей тени для ссылок

При наведении на ссылку прилетит её тень, в эффекте использованы свойства CSS, описан способ применения и демо использования эффекта для ссылок

Применение эффекта CSS прилетающей тени ссылок

Чтобы применить эффект, для начала Вам потребуется добавить стили CSS эффекта в любое удобное место.

a.hover-link-effect {
font-size: inherit;
}
a.hover-link-effect::before {
color: #444;
content: attr(data-hover-link);
position: absolute;
opacity: 0;
text-shadow: 1px 1px 0px rgb(223, 223, 223),2px 2px 0px rgb(185, 185, 185);
-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;
}
a.hover-link-effect:hover::before,
a.hover-link-effect:focus::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;
}

Самим ссылкам потребуется добавить 2 атрибута, class="hover-link-effect" и data-hover-link="ТЕКСТ ССЫЛКИ".

Текст в атрибуте data-hover-link="ТЕКСТ ССЫЛКИ" должен быть аналогичным тексту в самой ссылке.

<a href="#" class="hover-link-effect" data-hover-link="ТЕКСТ ССЫЛКИ">ТЕКСТ ССЫЛКИ</a>

Демо пример работы эффекта, при желании Вы можете внести свои корректировки в предлагаемый код и сразу посмотреть результат изменений.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.


Рейтинг: 5.0/5 из 4



Добавлено Автор Ник Источник Просмотров Комментариев Теги
28-09-2015 Михаил Меренков aTmpl © 329 0 эффект css, эффект для ссылок