ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект подчеркивания ссылок для 4 версий

Эффект подчеркивания ссылок для 4 версий

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

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

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

CSS анимация ссылка подчеркивание

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

Посмотреть на 4 разных эффекта:

- Середина наружу;
- Слева направо;
- Справа налево;
- Расти снизу;

Ниже приведен код, объясняющий эффекты, где непосредственно переходим к установки.

Подчеркнуть середина

Нам нужно добавить псевдокласс для добавления нового элемента, этот элемент будет использоваться для всех эффектов, он должен иметь высоту не менее 2 пикселей и ширину 100%, чтобы покрыть размер ссылки. Фон этого нового элемента будет цветом, который вы хотите подчеркнуть. Также по умолчанию нам нужно установить свойство видимости этого элемента, чтобы оно было скрыто с помощью visibility: hidden.

Для анимации мы будем использовать свойство transition: all 0.3s ease-in-out. А вот для анимации расширения ссылки от середины к внешней части, то задействуем свойство transform scaleX transform: scaleX(0); установив его в 0, который будет масштабировать элемент от оси x до 0.

HTML

Код

<a href="http://zornet.ru/load/81" class="angedoug-pacnavis">Скрипты для uCoz</a>

CSS

Код

.angedoug-pacnavis {
  position: relative;
  text-decoration: none;
  ont-size: 13px;
  font-weight: bold;
  color: #07405f;
}

.angedoug-pacnavis:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #272c4e;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.4s ease-in-out;
}

.angedoug-pacnavis:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

Это значение height: 1px отвичает за ширину появляющейся горизонтальной полосы. Для события hover кнопки нам нужно отобразить элемент: before, используя visibility: visible;, затем мы расширяем элемент до полного размера, изменяя scaleX обратно на 1 transform: scaleX(1); - где на демонстраций все понятно можно рассмотреть.

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

Слева направо

Для начала нам нужно создать ссылку с классом demigtan-ladopegas. Следующий эффект будет сдвигать подчеркивание слева от ссылки справа. Это работает аналогично среднему эффекту, добавляя новый элемент с помощью псевдо :before. Вместо использования scaleX нам нужно установить ширину на 0.

HTML

Код

<a href="http://zornet.ru/load/142" class="demigtan-ladopegas">Шаблоны для uCoz</a>

CSS

Код

.demigtan-ladopegas {
  position: relative;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  color: #093b56;
}

.demigtan-ladopegas:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #214456;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}

.demigtan-ladopegas:hover:before {
  visibility: visible;
  width: 100%;
}

Затем на событии при наведении курсора мы показываем подчеркивание с помощью visibility: visible и изменяем ширину на 100%, это чтоб захватывало полностью элемент, если сделать меньше, по полоса не будет доходить до самого последнего знака, думаю это понятно.

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

Справа налево

HTML

Код

<a href="http://zornet.ru/load/84" class="devekoped-devuslin">Меню для сайта</a>

CSS

Код

.devekoped-devuslin {
  position: relative;
  text-decoration: none;
  ont-size: 15px;
  font-weight: bold;
  color: #3f0640;
}

.devekoped-devuslin:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  right: 0;
  background-color: #4f0b50;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}

.devekoped-devuslin:hover:before {
  visibility: visible;
  width: 100%;
}

Следующий эффект будет сдвигать подчеркивание справа от ссылки слева. Это работает аналогично левому эффекту, добавляя новый элемент с помощью псевдо :before. Он установит ширину на 0, но изменит положение элемента слева направо, поэтому при событии наведения расширение элемента до ширины: 100% для перемещения элемента справа.

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

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

Раст снизу

Расширение ссылки снизу вверх, используя технику, аналогичную скольжению слева направо, но будет использовать высоту вместо ширины. Сначала вы устанавливаете ширину обратно на 100% и скрываете высоту, устанавливая ее на 0.

HTML

Код

<a href="http://zornet.ru/load/85" class="pamakegel-mentsinug">Всплывающие окна Ajax</a>

CSS

Код

.pamakegel-mentsinug {
  position: relative;
  text-decoration: none;
  font-size: 21px;
  font-weight: bold;
  color: #3e2102;
}

.pamakegel-mentsinug:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  background-color: #5f3407;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}

.pamakegel-mentsinug:hover:before {
  visibility: visible;
  height: 3px;
}

Рассматривая первый класс, который самый первый прописан в CSS, то там идет оформление знаков, где для каждого варианта поставлена своя гамма цвета. Также выставленное значение по величине.

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

В событии наведения ссылки мы отображаем ссылку, устанавливая свойство видимости видимым visibility: visible; и затем мы можем расширить подчеркивание, установив высоту в 3 пикселя.

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

06 Мая 2019 Просмотров: 1413 Комментариев: (0)

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

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

Kosten

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