Интересный hover-эффект для ссылок при создании меню сайта
Интересный hover-эффект для ссылок при создании меню сайта
CSS   364

В сегодняшнем уроке мы рассмотрим способ создания интересного hover-эффекта для ссылок, который пригодится при создании меню для сайта.

Данный эффект будет создан при помощи CSS, без использования различных скриптов.

Шаг 1. HTML-разметка

Первым делом нужно создать HTML-разметку. Она очень простая, и состоит лишь из маркированного списка и ссылок:

Шаг 2. Стили для ссылок

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

ul {
margin: 0px;
padding: 0px;
display: flex;
transform: translate(0, 0);
}

ul li {
list-style: none;
}

ul li a {
font-family: Roboto;
font-size: 18px;
font-weight: normal;
color: #e32a2a;
text-decoration: none;
display: block;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
overflow: hidden;
}

ul li a::before {
content: '';
position: absolute;
top: calc(50% - 2px);
left: -100%;
width: 100%;
height: 4px;
background: #e32a2a;
transition: 0.5s;
}

ul li a:hover {
color: #fff;
}

ul li a:hover::before {
animation: menu 0.5s linear forwards; 
}

Здесь тоже нет ничего сложного и нового. Единственное, что может оказаться новым, хотя это уже не новинка, это свойство display со значением flex.

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

Здесь данное значение использовалось для того, чтобы все блоки расположились в один ряд слева направо.

Шаг 3. Ключевые кадры для анимации

На последнем шаге нам нужно добавить ключевые кадры для того, чтобы анимация начала работать. Кадры добавляются с помощью правила @keyframes. Кадрам должно быть присвоено имя, оно указывается в свойстве animation. В нашем случае это menu:

@keyframes menu {
  0% {
    top: calc(50% - 2px);
    left: -100%;
    height: 4px;
    z-index: 1;
  }
  50% {
    top: calc(50% - 2px);
    left: 0;
    height: 4px;
    z-index: 1;
  }
  100% {
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
  }
}

Если что-то не работает, то скачайте исходники и посмотрите где у вас ошибки.

Автор урока: редакция REDSTAR
Урок для Вас подготовлен командой сайта red-star.pro.