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

Эффект зачеркивания текста при наведении в CSS

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

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

Установка:

HTML

Код

<nav class="navugasia">
  <ul>
  <li><a href="#">Скачать</a></li>
  <li><a href="#">Форум</a></li>
  <li><a href="#">Файлы</a></li>
  <li><a href="#">Навигация</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS

Код

.navugasia {
  width: 100%;
  position: fixed;
  top: 50px;
  text-align: center;
}

.navugasia ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.navugasia ul li{
  display: inline-block;
  vertical-align: middle;
}

.navugasia li a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  margin: 0 15px;
  font-size: 18px;
  position: relative;
  display: inline-block;
}

.navugasia li a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #fff;
  top: 47%;
  animation: out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

.navugasia li:hover a:before {
  animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

.navugasia li:nth-child(1) a {
  animation: show 0.2s 1.1s ease 1 both;
}

.navugasia li:nth-child(2) a{
  animation: show 0.2s 1.2s ease 1 both;
}

.navugasia li:nth-child(3) a{
  animation: show 0.2s 1.3s ease 1 both;
}

.navugasia li:nth-child(4) a {
  animation: show 0.2s 1.4s ease 1 both;
}

.navugasia li:nth-child(5) a {
  animation: show 0.2s 1.5s ease 1 both;
}

@keyframes in {
  0% {
  width: 0;
  left: 0;
  right: auto;
  }
  100% {
  left: 0;
  right: auto;
  width: 100%;
  }
}

@keyframes out {
  0% {
  width: 100%;
  left: auto;
  right: 0;
  }
  100% {
  width: 0;
  left: auto;
  right: 0;
  }
}

@keyframes show {
  0% {
  opacity: 0;
  transform: translateY(-10px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}

На этом почти все, осталось разобраться по времени появления, точнее настроить скорость.

Анимация и тайминги

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

Нужно указать конкретный пункт меню, которое пройдет через свойство nth-child(N) и плюс, это увеличение время на 0.1s - что необходимо для каждого последующего пункта меню.

N - номер меню, начиная с единицы:

Код

.navugasia li:nth-child(1) a {
  animation: show 0.2s 1.1s ease 1 both;
}
.navugasia li:nth-child(2) a{
  animation: show 0.2s 1.2s ease 1 both;
}
.navugasia li:nth-child(3) a{
  animation: show 0.2s 1.3s ease 1 both;
}

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

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

30 Мая 2021 Загрузок: 2 Просмотров: 1826 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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