В этой статье рассмотрим несколько эффектов ссылки при наведении курсора. Благодаря им, вы сможете сделать свой сайт более интересным и запоминающимся.
Давайте начнем с самых простых эффектов
1. Изменение фона ссылки.
Как видите, при наведении на ссылку, фон меняется на синий.
Давайте рассмотрим как можно это осуществить.
- Создаем новую запись, переходим в текстовый режим и создаем ссылку
<a href="#" id="link1">Ссылка</a>
вместо # указать адрес ссылки
- Теперь в корне вашего сайта, необходимо найти файл Style.css и в самом низу прописать код.
#link1:hover {background:#5478AA;}
Не забудьте сохранить файл.
2. Плавное изменение цвета ссылки.
Здесь как видите, цвет ссылки при наведении плавно меняется на красный.
Также создаем ссылку и присваиваем ей идентификатор. Создаем новую запись и пишем
<a href="#" id="link2">Ссылка</a>
В файле Style.css вставьте код
#link2:hover {color:red; transition: all .5s ease;}
transition — скорость изменения цвета.
3. Подчеркивание ссылки при наведении на чистом CSS3
Html код
<a href="#" id="link3">Ссылка 3</a>
Css код
#link3 {text-decoration: none; display: inline-block; position: relative; font-family: Arial; font-weight: bold; padding: 0 0 5px 0; color: #eb5055; } #link3:after { content: ''; position: absolute; height: 2px; width: 100%; left: 0; bottom: 0; visibility: hidden; background-color: #eb5055; -webkit-transition: all .1s ease; transition: all 0.3s ease; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } #link3:hover:after { visibility: visible; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
4. Интересный эффект вращения.
Html код
<div class="nav"> <ul> <li><a href="#" id="link4"><span>Ссылка 4</span></a></li> </ul> </div>
Css код
#link4 { color: #ff0000; font-weight: bold; overflow: hidden; vertical-align: top; display: inline-block; text-decoration: none; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease; } .nav ul li {list-style-type: none;} #link4.nav span, #link4 span { display: block; position: relative; padding: 0 2px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } #link4.nav span:before, #link4 span:before { content: attr(data-title); display: block; position: absolute; padding: 0 2px; color: #fff; background: #ff0000; top: 0; left: 0; opacity: 1; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateY( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateY( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotateY( -90deg ); transform: translate3d( 0px, -105%, 0px ) rotateY( -360deg ); } #link4.nav:hover span, #link4:hover span { background: #ff0000; color: #fff; -webkit-transform: translate3d( 0px, 0px, 0px ) rotateY( 90deg ); -moz-transform: translate3d( 0px, 0px, 0px ) rotateY( 90deg ); -ms-transform: translate3d( 0px, 0px, 0px ) rotateY( 90deg ); transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg ); }
Возможно вас также заинтересует статья на тему «Изменение картинки при наведении курсора«.
Как вам статья?
Олег
Пишите ваши вопросы и ответы в комментариях