Красивые ссылки… с анимацией!

В пер­вой части мы про­грам­ми­ро­ва­ли кра­си­вые ссыл­ки с под­чёр­ки­ва­ни­ем и сме­ной цве­та при наве­де­нии. Теперь выкру­тим кра­со­ту на мак­си­мум — сде­ла­ем так, что­бы при наве­де­нии ссыл­ка меня­ла цвет не сра­зу, а постепенно.

Как сделаем анимацию

Логи­ка рабо­ты будет такая:

  1. Оформ­ля­ем все ссыл­ки на стра­ни­це как обыч­но — с тон­ким под­чёр­ки­ва­ни­ем и синим цве­том, как в про­шлой статье.
  2. Как толь­ко наво­дим мыш­ку на ссыл­ку, она плав­но меня­ет цвет на оранжевый.
  3. Линия под­чёр­ки­ва­ния тоже плав­но ста­но­вит­ся оран­же­вой и более заметной.
  4. Как толь­ко уби­ра­ем мыш­ку — ссыл­ка мед­лен­но воз­вра­ща­ет­ся к сине­му цве­ту и тон­кой линии.

Сде­ла­ем всё по очереди.

Оформляем стильные ссылки

Про­сто берём финаль­ный код из пер­вой части и встав­ля­ем его на сайт. Нам нуж­ны пока два эле­мен­та: a{} и a:hover{}:

a {
  text-decoration: none;
  color: #0f7afc;
  border-bottom: 1px solid;
  border-bottom-color: rgba(15, 122, 252, 0.2);
}
a:hover {
  text-decoration: none;
  color: #cf0000;
  border-bottom-color: rgba(208, 64, 0, 0.2);
}

Добавляем анимацию

За плав­ную сме­ну цве­та и любых дру­гих пара­мет­ров отве­ча­ет свой­ство transition. Оно гово­рит бра­у­зе­ру, что все свой­ства, кото­рые есть у эле­мен­та, нуж­но сде­лать таки­ми, как напи­са­но, вот за такое вре­мя. В общем виде это рабо­та­ет так:

  • Берём какой-то эле­мент, напри­мер ссылку.
  • Про­пи­сы­ва­ем ссыл­ке все свой­ства, кото­рые у неё долж­ны быть.
  • Пишем transition 1s;.
  • Теперь бра­у­зер пони­ма­ет, что каж­дый раз, когда надо пока­зать любую ссыл­ку, все изме­не­ния свойств нуж­но рас­тя­нуть на одну секунду.
  • Пишем свой­ство a:hover{}.
  • И теперь, когда мы наво­дим мыш­ку на ссыл­ку, бра­у­зер в тече­ние целой секун­ды меня­ет пара­мет­ры ссыл­ки на те, что про­пи­са­ны в ховере.
  • А когда уби­ра­ем мыш­ку — столь­ко же вре­ме­ни воз­вра­ща­ет ссыл­ке пер­во­на­чаль­ный вид.

У свой­ства transition есть мно­го пара­мет­ров, и с ними мож­но настро­ить ани­ма­цию чего угод­но, но пока нам это не нуж­но. Всё, что нам нуж­но доба­вить на этом эта­пе в раз­дел a{}, — это команду:

transition 0.7s;

Одна секун­да — это дол­го, луч­ше поста­вить чуть мень­ше. Но это уже чистая вку­сов­щи­на, поэто­му ставь­те сколь­ко понра­вит­ся. Для бое­вых интер­фей­сов делай­те 0,1–0,3, для более манер­ных декор­ных вещей — 0,5–0,8.

Делаем линию подчёркивания более заметной

Всё реша­ет­ся одной циф­рой: в раз­де­ле a:hover{} меня­ем пара­метр alpha с 0.2 на 1:

border-bottom-color: rgba(208, 64, 0, 1);

Напом­ним: rgba озна­ча­ет «крас­ный, зелё­ный, синий и про­зрач­ность (alpha)». Alpha зада­ёт­ся чис­лом от 0 до 1. Напри­мер, 0,1 — это 10% непро­зрач­но­сти, почти не вид­но. 0,5 — линия будет напо­ло­ви­ну про­зрач­ной. И вот у нас было ниж­нее подчёркивание.

Когда мы поме­ня­ли про­зрач­ность на 1, линия из совсем блед­ной сно­ва ста­ла тол­стой. Но так как мы при этом ещё и поме­ня­ли у неё цвет, то кажет­ся, что линия тоже нача­ла ярче све­тить­ся при наведении.

Теперь, когда мы наве­дём мыш­ку на ссыл­ку, сра­бо­та­ет свой­ство transition и цвет тек­ста и линии плав­но поме­ня­ет­ся на тот, что нам нужен. А когда убе­рём — сно­ва сра­бо­та­ет transition и плав­но всё вер­нёт­ся обрат­но. Это ли не магия?

Как это улучшить

Наш спо­соб — самый про­стой из воз­мож­ных, и сде­лать ани­ма­цию у ссы­лок мож­но гораз­до интереснее:

  • допи­сать спе­ци­фи­че­ские пара­мет­ры transition для каж­до­го бра­у­зе­ра, что­бы ссыл­ки вез­де выгля­де­ли прекрасно;
  • доба­вить плав­ную сме­ну цве­та при нажа­тии на ссылку;
  • сде­лать так, что­бы при наве­де­нии мыш­ки над ссыл­кой появ­ля­лось крат­кое опи­са­ние того, куда она ведёт.

Поде­ли­тесь в ком­мен­та­ри­ях сво­и­ми вари­ан­та­ми, как бы вы при­ме­ни­ли или улуч­ши­ли пове­де­ние ссылок.

Анимация — это фронтенд
Нуж­но боль­ше ани­ма­ции и сти­ля? При­хо­ди­те в «Прак­ти­кум» учить­ся фронтенд-разработке. Раз уж вы здесь, зай­ди­те пря­мо сейчас: