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

Анимация для меню

Создавая сайт самостоятельно, всегда хочется сделать его уникальным и нешаблонным. Если вы только новичок в создании сайтов, то прочитайте эту статью. Используя минимальный код css без javascript можно легко украсить любые ссылки анимированным подчеркиванием при наведении на них курсора мыши. Такая css анимация сделает меню сайта более приятным глазу пользователя и привлечет внимание)

Я часто использую этот метод для анимации пунктов меню на сайтах.

Вот например один из моих сайтов с такой анимацией.

Код из примера

Html

[sourcecode]
<div class="container">
    <ul class="menu">
      <li><a href="#">Пункт меню 1</a></li>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 3</a></li>
      <li><a href="#">Пункт меню 4</a></li>
    </ul>
</div>
[/sourcecode]

Css

[sourcecode language="plain"]
body {
  background-color: #263133;
  font-family: sans-serif;
  font-size: 1.5em;
}
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.menu {
  margin: 0 auto;
  padding: 10px 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
}
ul.menu li a {
  display: block;
  text-decoration: none;
  color: #fff;
  position: relative;
}
ul.menu li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background-color: #fff;
  transition: all 0.3s;
  transform: scale(0);
  /*transform-origin: 0 50%; */
}
ul.menu li a:hover::after {
  transform: scale(1);
}
[/sourcecode]

Весь пример можно посмотреть на Codepen

Поделиться

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *