ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создание анимации при наведении в CSS3

Создание анимации при наведении в CSS3

Создание анимации при наведении в CSS3
В статье показано, как создать красивую и оригинальную анимации при наведении границы при помощи CSS3, где идет подчеркивание ключевого слова. В материале представлена статья по созданию Hover Border Animation с использованием CSS3 и HTML. Ведь веб мастер может задействовать эту анимацию для меню навигации, в качестве эффекта наведения мыши или любого HTML-элемента, который вы хотите показать при наведении курсора.

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

По умолчанию:

Горизонтальное подчеркивание на HTML+CSS

При наведении:

Красивый эффект для ссылок

Установка:

HTML

Код
<div class="text-center">
  <a href="http://zornet.ru" class="pareniya-granitsy">Ключевые заголовки</a>
  </div>

CSS

Код
.pareniya-granitsy {
  font-size: 28px;
  text-decoration: none;
  position: relative;
  color: #197786;
}
   
.pareniya-granitsy::after {
  content: '';
  width: 0%;
  height: 3px;
  background: #30a3af;
  position: absolute;
  bottom: 0%;
  left: 50%;
  border-radius: 5px;
  transition: all 500ms ease;
}
   
.pareniya-granitsy:hover::after{
  left: 0%;
  width: 100%;
}

Установочный процесс проходит так, это в теле тега создаются два HTML-элемента, где также прописываем тег деления с классом text-center - для того, чтоб анимация центра слова или обозначения начиналась.

После этого создайте тег привязки, а точнее выставляем класс pareniya-granitsy и добавляем его в текст или ключевые фразы, что покажется при наведении курсора.

Демонстрация
2020-05-20 Загрузок: 1 Просмотров: 257 Комментарий: (0)

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

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

Оставь свой отзыв

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