Вам надоел один и тот же старый скучный дизайн меню на вашем сайте? Хотите добавить изюминку и интерактивность в свою навигацию? Не смотрите дальше! В этой статье мы рассмотрим различные методы создания списка меню CSS с анимацией подчеркивания при наведении. Итак, пристегнитесь и приготовьтесь стильно преобразить меню вашего сайта!

Метод 1: использование CSS-переходов
Один из самых простых способов добиться анимации подчеркивания при наведении — использование CSS-переходов. Вот пример:

«»;
позиция: абсолютная;
ширина: 100%;
высота: 2 пикселя;
низ: 0;
цвет фона: #333;
видимость: скрытый;
преобразование: масштабX(0);
переход: все 0,3 секунды, легкость выхода;
}
.menu a:hover::before {
видимость: видимый;
преобразование: ScaleX(1);

Метод 2: использование анимации ключевых кадров CSS
Если вы хотите создать более динамичную анимацию при наведении, вам на помощь могут прийти ключевые кадры CSS. Вот пример:

«»;
позиция: абсолютная;
ширина: 100%;
высота: 2 пикселя;
низ: 0;
цвет фона: #333;
видимость: скрыто;
анимация: подчеркивание 0,3 с. легкость вывода;
}
.menu a:hover::before {
видимость: видимая;
}
@keyframes подчеркивание {
0% {
преобразование: масштабX(0);

100% {
преобразование: масштабX(1);

Метод 3: использование CSS-переходов и положения фона
Для более тонкой анимации вы можете использовать CSS-переходы вместе с положением фона. Вот пример:

«»;
позиция: абсолютная;
ширина: 100%;
высота: 2 пикселя;
нижняя часть: 0;
цвет фона: #333;
фон- позиция: 0 100%;
фоновый повтор: без повтора;
переход: фоновая позиция 0,3 секунды с легкостью выхода;
}
.menu a:hover::before {
фоновая позиция: 0 0;

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

Помните, что визуально привлекательное и привлекательное меню может значительно улучшить взаимодействие с пользователем и заставить посетителей возвращаться снова и снова.

Итак, чего же вы ждете? Обновите свое меню сегодня и сделайте свой сайт сияющим!