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

Эффект подчёркивания от центра на CSS

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

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

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

Представлено виде горизонтального меню:

HTML

Код

<div class="nokorgin-kestalmen">

<ul>
  <li><a class="coursab-unokasing" href="#">Скрипты</a>
  <li><a class="coursab-unokasing" href="#">Дизайн</a>
  <li><a class="coursab-unokasing" href="#">Zornet.Ru</a>
  <li><a class="coursab-unokasing" href="#">Контакты</a>
  </li>

  </div>

CSS

Код

ul {
  list-style-type: none;
  margin: 0;
  text-align: center;
  margin-top: 10%;
}
ul li {
  display: inline-block;
  margin: 0 20px;
}

.coursab-unokasing {
  font-size: 18px;
  color: #4a4847;
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 7px;
}
.coursab-unokasing:before, .coursab-unokasing:after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 2px;
  height: 2px;
  background-color: #c53f3f;
}
.coursab-unokasing:before {
  opacity: 0;
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
  -webkit-transition: -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
  transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}
.coursab-unokasing:after {
  opacity: 0;
  -webkit-transform: translateY(4px);
  -ms-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}
.coursab-unokasing:hover:before, .coursab-unokasing:hover:after, .coursab-unokasing:focus:before, .coursab-unokasing:focus:after {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.coursab-unokasing:hover:before, .coursab-unokasing:focus:before {
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
.coursab-unokasing:hover:after, .coursab-unokasing:focus:after {
  -webkit-transition: -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
  transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
}

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

Важно: Проверяя на работоспособность, и также выставляя класс, ведь изначально все материал без класса был. То здесь прописал класс nokorgin-kestalmen, который не за что не отвечает, если вам нужно подчеркивание, то он не нужен. Кто то решит дальше достроить по оформлению, то возможно пригодится.

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

09 Июня 2019 Загрузок: 1 Просмотров: 1160 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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