• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Анимационное подчеркивание ссылок по центру (Красивое подчёркивание ссылки при наведении клика)
Анимационное подчеркивание ссылок по центру
Kosten
Дата: Понедельник, 2019-05-06, 01:07 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25098
Награды: 57


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

Первое, что нам нужно сделать, это отключить text-decoration и установить ссылку positionна relative. Для упрощения, мы также позаботимся о том, чтобы ссылка не меняла цвет при наведении курсора.



Для начала HTML

Код
<a href="/" class="danikaton-devansokem">Наведи на меня клик</a>

CSS

Код
.danikaton-devansokem {
    position: relative;
    color: #0c2b5a;
    text-decoration: none;
    font-size: 30px;
  display:inline-block;
}

.danikaton-devansokem:hover {
    color: #0c2b5a;
}

Далее мы хотим добавить границу и скрыть ее с помощью преобразования. В качестве запасного варианта мы скрываем это visibility: hidden для браузеров, которые не поддерживают CSS-анимацию.

Код
.danikaton-devansokem:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0c2b5a;
  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 и установить его масштаб.

Код
.danikaton-devansokem:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

И это все!

Демонстрация
Прикрепления: 5362642.jpg(59.1 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-05-06, 01:31 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25098
Награды: 57


Если кого интересует, чтоб поставить стиль подчеркивание, где точно такой по эффекту. Где при установки он будет показываться на всех ссылках по всем страницам сайта, то в теме hover подчеркивание для ссылок все подробно можно узнать.
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Анимационное подчеркивание ссылок по центру (Красивое подчёркивание ссылки при наведении клика)
  • Страница 1 из 1
  • 1
Поиск: