Главная » Полезные статьи » HTML-верстка » Анимационное подчеркивание
Распечатать статью

Анимационное подчеркивание

Мало кто знает, что при помощи таблиц каскадных стилей подчеркивания под ссылками можно сделать анимационными.

На самом деле задать в параметрах именно анимационное подчеркивание не представляется возможным, зато в качестве фона ссылки вполне можно задать анимационную картинку:

<style> a.sym:link { text-decoration: none; font-size: 11px; font-family: verdana } a.sym:hover { text-decoration: none; background-image: url(line.gif); background-repeat: repeat-x; background-position: 100% 100%; padding-bottom: 2px } a.sym:active { text-decoration: none } a.sym:visited { text-decoration: none } </style>

Мы определили класс ссылок sym. При этом по умолчанию все ссылки этого класса не имеют подчеркивание (text-decoration: none). При наведении на ссылку, она получает фоновую картинку (background-image: url(line.gif)), которая отображается в необходимой позиции (background-position: 100% 100%, в нашем случае под ссылкой).

В качестве анимационного фона задается небольшая gif-картинка.

В результате все ссылки класса sym будут иметь анимационное подчеркивание.

<a href='' class=sym>Анимационна ссылка, наведи на меня!</a>
Источник: internet-technologies.ru 
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи