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