В дизайне веб-сайта стили ссылок всегда должны отличатся от остального текста на странице. Так пользователям будет проще найти их. С помощью кода CSS можно добавить стили для моментов, когда пользователь наводит указатель мыши, например, изменить начертание текста ссылки на полужирное. Такое изменение стиля делает ссылку еще заметнее. 

Можно встретить интересный эффект при наведении указателя мыши на ссылку в боковом столбце, при котором она выдвигается из списка. Эффект выдвигания можно анимировать с помощью jQuery, но проще сделать это с помощью анимаций CSS3, и в этом уроке мы объясним, как создать выдвигающиеся ссылки, используя анимации CSS3, без использования jQuery.

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

Демонстрация работы

Код HTML 

Код HTML будет состоять только из простого списка со ссылками:

<ul class="indenting_links">
	<li><a href="">Link 1</a></li>
	<li><a href="">Link 2</a></li>
	<li><a href="">Link 3</a></li>
	<li><a href="">Link 4</a></li>
	<li><a href="">Link 5</a></li>
	<li><a href="">Link 6</a></li>
	<li><a href="">Link 7</a></li>
	<li><a href="">Link 8</a></li>
	<li><a href="">Link 9</a></li>
	<li><a href="">Link 10</a></li>
</ul>

Код CSS3 

После создания кода HTML мы можем добавить код CSS, который создаст анимацию выдвигания.

У нас уже есть класс у списка, так что мы можем использовать его, чтобы задать свойства CSS.

Для добавления эффекта ссылке при наведении указателя мыши воспользуемся следующим кодом CSS:

.indenting_links li a:hover {
	padding-left:20px;
  	-webkit-transition: padding-left 500ms ease-out;
    -moz-transition: padding-left 500ms ease-out;
    -o-transition: padding-left 500ms ease-out;
    transition: padding-left 500ms ease-out;
}

Этот код CSS добавит отступ влево на 20 пикселей при наведении указателя мыши на ссылку с помощью свойства перехода, которому задано значение отступа влево и длительность перехода в 500мс, а также временная характеристика перехода, при которой он быстро начнется и будет замедляться до полной остановки.

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

Демонстрация работы

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также: