Анимация меню при помощи CSS

Анимация меню при помощи CSS

Owebs
28 июля 2022
Просмотры 104
Рейтинг
Время чтения Время чтения: 3 минуты

Оглавление
Развернуть Свернуть

 

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

Для создания нашей цели вам надо перекопировать следующие части кодов:

HTML:
                <ul class="menu-text">
                    <li>
                        <a href="#" data-text="home">
                            home
                        </a>
                    </li>   
                    <li>
                        <a href="#" data-text="about">
                            about
                        </a>
                    </li>   
                    <li>
                        <a href="#" data-text="contects">
                            contects
                        </a>
                    </li>
                </ul>

            
CSS:
                .menu-text {
                    position: relative;
                }
        
                .menu-text li {
                    list-style: none;
                    padding: 10px 0;
                }
        
                .menu-text a {
                    position: relative;
                    display: inline-block;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-weight: 700;
                    font-size: 25px;
                    color: #fff;
                    transition: all 0.4s;
                    transition-delay: 0.3s;
                }
        
                .menu-text a:hover {
                    transform: translateY(-15px);
                    color: rgba(255, 255, 255, 0.2);
                }
        
                .menu-text a::before {
                    content: attr(data-text);
                    position: absolute;
                    bottom: -14px;
                    left: 5px;
                    font-size: 12px;
                    letter-spacing: 100px;
                    color: rgb(142, 215, 248);
                    pointer-events: none;
                    z-index: 1;
                    opacity: 0;
                    transition: all 0.4s;
                }
        
                .menu-text a:hover::before {
                    letter-spacing: 3px;
                    opacity: 1;
                    transition-delay: 0.3s;
                }
            

После копирования вышеупомянутых кусков кода, у вас должно появиться такое меню: (наведите курсор на пункты)

Наш анимированный тест пунктов меню - готов. Появляющиеся и исчезающие слова прописываются через атрибут "data-text". Все цвета в CSS можете изменять по своему желанию. Для корректной работы кода не рекомендуем вносить изменения в структуру html кода (исключение - добавление и убавление количества пунктов). В CSS же, можете менять шрифты, текст и размеры карточки по своему усмотрению.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 188
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 361
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 371
Рейтинг 4
9 февраля
3 месяцев назад

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

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

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

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

Согласен