Создание анимации при наведении в CSS3
 | |
| В статье показано, как создать красивую и оригинальную анимации при наведении границы при помощи CSS3, где идет подчеркивание ключевого слова. В материале представлена статья по созданию Hover Border Animation с использованием CSS3 и HTML. Ведь веб мастер может задействовать эту анимацию для меню навигации, в качестве эффекта наведения мыши или любого HTML-элемента, который вы хотите показать при наведении курсора. Сама анимация простая для корректировки, где изначально начинается в середине и заканчивается с обеих сторон, где при перемещении курсора от элемента произойдет обратный эффект. Лучше всего-то, что вы можете использовать эту анимацию в любом месте для вашего элемента меню навигации, для заголовков и тех текстов, которые вы хотели выделить. А это безусловно должны быть ссылке для перехода на другую странице или заголовки материалов. По умолчанию:  При наведении:  Установка: HTML Код <div class="text-center"> <a href="http://zornet.ru" class="pareniya-granitsy">Ключевые заголовки</a> </div> CSS Код .pareniya-granitsy { font-size: 28px; text-decoration: none; position: relative; color: #197786; } .pareniya-granitsy::after { content: ''; width: 0%; height: 3px; background: #30a3af; position: absolute; bottom: 0%; left: 50%; border-radius: 5px; transition: all 500ms ease; } .pareniya-granitsy:hover::after{ left: 0%; width: 100%; } Установочный процесс проходит так, это в теле тега создаются два HTML-элемента, где также прописываем тег деления с классом text-center - для того, чтоб анимация центра слова или обозначения начиналась. После этого создайте тег привязки, а точнее выставляем класс pareniya-granitsy и добавляем его в текст или ключевые фразы, что покажется при наведении курсора. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |