Разные эффекты при наведении на ссылку

Добрый
день. В сегодняшнем уроке я хочу показать вам очень интересный эффект,
который будет появляться при наведении на ссылку любого веб-сайта. Суть
его заключается в том, что под ссылкой появляется анимированный .gif
фон, который придает ссылке красивое оформление.

Например такой фон для ссылки я создал в фотошоп за пару минут:



код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/polosa-fon.gif);}</style>

Скрипт очень прост в установке - нужно просто поместить данный код перед </body> на необходимые страницы сайта.




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

У меня вышел громоздкий вариант, поэтому я предлагаю еще несколько вариантов фонов, которые могут подойти на ваш сайт:


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/flames2.gif);}</style>


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/9476822_l.gif);}</style>


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/blood.gif);}</style>


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/colorballs.gif);}</style>



код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/blue.gif);}</style>



код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/aqua.gif);}</style>


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/yellow.gif);}</style>


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/green.gif);}</style>


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/redarrowline.gif);}</style>


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/lightning.gif);}</style>


код установки:
<style type="text/css">A:hover{background:url(http://ucoz-lab.ucoz.ru/img-lab/gif-fons/comet.gif);}</style>


При установке не забудьте, что одни эффекты хорошо смотрятся на светлых ссылках, а другие - на темных.

Надеюсь, что данный небольшой скрипт будет вам полезен. Удачи вам, увидимся в следующих уроках!