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

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

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

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

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

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

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

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

    
language: CSS
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 для каж­до­го бра­у­зе­ра, что­бы ссыл­ки вез­де выгля­де­ли пре­крас­но;
  • доба­вить плав­ную сме­ну цве­та при нажа­тии на ссыл­ку;
  • сде­лать так, что­бы при наве­де­нии мыш­ки над ссыл­кой появ­ля­лось крат­кое опи­са­ние того, куда она ведёт.

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

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