Меню Основное

Эффекты при наведении на ссылку!

В этой статье рассмотрим несколько эффектов ссылки при наведении курсора. Благодаря им, вы сможете сделать свой сайт более интересным и запоминающимся.

Давайте начнем с самых простых эффектов

1. Изменение фона ссылки.

Ссылка

Как видите, при наведении на ссылку, фон меняется на синий.

Давайте рассмотрим как можно это осуществить.

  • Создаем новую запись, переходим в текстовый режим и создаем ссылку
<a href="#" id="link1">Ссылка</a>

вместо # указать адрес ссылки

  • Теперь в корне вашего сайта, необходимо найти файл Style.css и в самом низу прописать код.
#link1:hover {background:#5478AA;}

Не забудьте сохранить файл.

2. Плавное изменение цвета ссылки.

 Ссылка 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 );  }

Возможно вас также заинтересует статья на тему «Изменение картинки при наведении курсора«.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2018-2019 Онлайн журнал - Blognovichok.ru· Авторские права защищены.
Все материалы опубликованные на сайте являются объектами авторского права. Использование материалов разрешается только с активной ссылкой на blognovichok.ru