| Мало кто знает, что при помощи таблиц каскадных стилей подчеркивания под ссылками можно сделать анимационными.
На
самом деле задать в параметрах именно анимационное подчеркивание не
представляется возможным, зато в качестве фона ссылки вполне можно
задать анимационную картинку:
<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 будут иметь анимационное подчеркивание.
|
Копирование материалов разрешено,