Анимация для заголовков

Анимация для заголовков

Анимация для заголовков

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

 

Анимационный эффект для заголовков

 

Создание этого эффекта на удивление прост, не требует каких-либо дополнительных элементов DOM, которые будут добавлены через HTML, и работает хорошо для браузеров, которые не поддерживают CSS анимации (он просто будет отображаться как обычное подчеркивание).

Первое, что нам нужно сделать, это отключить text-decoration, и установить position наrelative. Здесь мы применяем эффект ко всем элементам ссылок внутри h3.

h3 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}
 
h3 > a:hover {
  color: #000;
}

Далее, мы добавим границу, и скроем ее через трансформацию. Мы сделаем это, с помощью :before, и установим его X масштаб на 0. Как запасной вариант, мы скроем его для браузеров, которые не поддерживают CSS – анимации.

h3 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

В самом низу мы указываем все изменения примененных к элементам анимации и установим длительностью на 0,3 секунды. Для появления анимации нам просто нужно снова сделать элемент видимым с помощью hover, и установить его X масштаб обратно на 1.

h3 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Вот и все! У Firefox есть поддержка animation и transform без префикса moz, начиная с версии 16.0, поэтому мы не будем добавлять префикс moz в коде. Если вы хотите обезопасить себя, вы просто должны добавить -o и -moz ко всем анимациям и преобразованиям.

Aliexpress INTAliexpress INTAliexpress INT

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

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