Разные эффекты при наведении на ссылку
Добрый
день. В сегодняшнем уроке я хочу показать вам очень интересный эффект,
который будет появляться при наведении на ссылку любого веб-сайта. Суть
его заключается в том, что под ссылкой появляется анимированный .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>
При установке не забудьте, что одни эффекты хорошо смотрятся на светлых ссылках, а другие - на темных.
Надеюсь, что данный небольшой скрипт будет вам полезен. Удачи вам, увидимся в следующих уроках!
Коментарии 0