ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация с подчёркивающей линией для ссылок

Анимация с подчёркивающей линией для ссылок

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

Можно сделать с подчеркиваниями, но если вы углубитесь в анимацию CSS, вы поймете, насколько вы действительно можете это сделать, где будет представлена возможность вариаций, с какой стороны начнется появление. Это может как с павой или левой стороны, но также по центру выстроить можно.

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

Приступаем к установке:

Здесь для примера возьмем стандартную html конструкцию, где идет родительский элемент с классом gtukopask_saznudemka, внутри которого идут ссылки на - a. Где навигационное меню устроенно аналогично.

HTML

Код

<div class="gtukopask_saznudemka">
<a href="http://zornet.ru">ZORNET.RU</a> <a href="#">Скриптя для сайта</a>
</div>

CSS

Код

.gtukopask_saznudemka a {
  display: inline-block;
  color:#6f5440;
  line-height: 1;
  text-decoration:none;
  cursor: pointer;
}
.gtukopask_saznudemka a:after {
  background-color: #d65507;
  display: block;
  content: "";
  height: 3px;
  width: 0%;
  -webkit-transition: width .3s ease-in-out;
  -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
}
.gtukopask_saznudemka a:hover:after,
.gtukopask_saznudemka a:focus:after {
  width: 100%;
}

Все как видим не сильно сложно.

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

Создаем линию, что по центру изначально подчеркивает

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

HTML

Код

<div class="lavadoteg_mentrovka">
<a href="http://zornet.ru/load/142">Здесь ссылка на анимацию</a> <a href="http://zornet.ru/news">Переход на страницу</a>
</div>

CSS

Код

.lavadoteg_mentrovka a {
  display: inline-block;
  color: #077caa;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.lavadoteg_mentrovka a:after {
  display: block;
  content: "";
  background-color: #1174ab;
  height: 3px;
  width: 0%;
  left: 50%;
  position: absolute;
  -webkit-transition: width .3s ease-in-out;
  -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}
.lavadoteg_mentrovka a:hover:after,
.lavadoteg_mentrovka a:focus:after {
  width: 100%;
}

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

Теперь о главном, это установить на свой интернет ресурс эти оригинальные эффекты подчеркивание. Здесь все просто, что изначально нужно разместить в CSS-коде классы родительского элемента, на классы со своего портала.

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

28 Мая 2018 Просмотров: 1107 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0