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

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

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

                <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>

            

                .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 же, можете менять шрифты, текст и размеры карточки по своему усмотрению.