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