Стильный дизайн сайта учитывает каждый аспект и элемент сайта, будь то большой или маленький. Небольшие анимации и красиво оформленные элементы могут значительно улучшить общее впечатление пользователя и вывести весь дизайн на новый уровень. С небольшой помощью CSS3 эффект наведения на гиперссылки может быть более красивым, интерактивным и привлекательным. В этом посте представлены решения CSS3 для применения различных эффектов наведения на элемент гиперссылки.
Гиперссылки - или якорные теги - являются важным элементом любого веб-сайта, и это единственный способ отобразить внутренние или внешние ссылки на веб-сайте. По умолчанию без каких-либо подчеркиваний CSS и синей окраски будут присутствовать тег привязки и значок мыши с указателем руки при наведении курсора.
Традиционно за дизайном по умолчанию следовали некоторые дополнительные CSS для применения разных стилей для подчеркивания или разных цветов. С CSS3 все обстоит иначе, так как он предлагает намного больше для изучения новых дизайнов и элементов анимации.
Плавно изменить цвет
CSS3 имеет свойство, называемое «переход», которое позволяет плавно изменять значения свойств с одного значения на другое в течение заданного периода времени. Он оживляет изменения свойств, а не применяет их немедленно.
Рассмотрим следующий HTML:
Традиционный способ изменить цвет при всплывающем событии:
Код
#color:hover { color: purple; }
Это изменит цвет сразу при наведении мыши. Но свойство перехода CSS3 делает весь этот процесс гладким. Следующий класс CSS будет применять цветовой переход в течение 0,9 секунд.
Код
#color:hover { transition: color .9s; color: purple; }
В приведенном выше примере и свойство background, и color будут переходить из-за значения all, указанного для свойства transition. Вы можете проверить рабочую демонстрацию здесь.
Увеличьте размер шрифта
Чтобы добавить анимацию увеличения размера шрифта, вам не нужно устанавливать свойство CSS размера шрифта. Вы можете использовать свойство transform в CSS3 для масштабирования текста до некоторой степени, что приводит к увеличению эффекта размера шрифта.
В следующем CSS-коде используются свойства перехода и преобразования для масштабирования:
Перелистывание текста при наведении - один из моих любимых анимационных эффектов. Эффект переворачивания выглядит хорошо на текстовом элементе, когда он завершается быстро. Чтобы сделать эту анимацию сглаживания плавной, поместите свой якорный текст в элемент span.
В следующем коде CSS будет реализован эффект переворота для события наведения тега привязки. Назначьте значение поворота, чтобы преобразовать свойство, чтобы повернуть текст на 360 градусов, чтобы создать эффект переворачивания.
Код
a, a span { display: inline-block; } a span { transition: .5s; } a:hover span { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); }
Добавление рамки вокруг текста привязки и удаление накипи для того, чтобы текст уместился внутри рамки, это еще один крутой способ анимации при наведении. Следующий код CSS присоединяет событие hover к элементам тега привязки, где используем селектор CSS ::before, добавляет рамку вокруг текста привязки. Селектор ::before вставляет что-то перед содержимым каждого выбранного элемента. Вам необходимо использовать свойство content, чтобы указать контент для вставки.
Вы можете увидеть приведенный выше код в действии здесь.
Поместите якорный текст в анимированный прямоугольник
Предыдущий код CSS создает рамку вокруг текста привязки, но его также можно улучшить, чтобы поместить текст привязки внутри анимированного прямоугольника. Анимированный прямоугольник отображается как эффект увеличения и покрывает текст привязки. В следующем коде CSS используется селектор ::before для создания сплошного прямоугольника вокруг элемента привязки, который становится видимым с помощью эффекта наведения мыши.
Свойство transition добавляет эффект преобразования для масштабирования прямоугольника, что создает эффект увеличения:
Вы можете увидеть приведенный выше код в действии здесь.
Создать квадратные скобки вокруг якорного текста
Следующий код CSS добавляет квадратные скобки вокруг текста привязки при наведении курсора. Квадратные скобки отображаются в виде скользящего эффекта. Чтобы добавить квадратную скобку, CSS использует селекторы ::before и ::after; внутри этих селекторов он определяет положение скобки из текста привязки. Вы можете легко изменить квадратные скобки на любые другие символы или скобки другого типа, изменив селектор ::before и ::after.
Вы можете увидеть приведенный выше код в действии здесь.
Наклонить текст привязки
Наклон текста привязки при наведении может легко привлечь внимание пользователя. Чтобы создать эффект наклона, достаточно повернуть текст ссылки в некоторой степени, используя свойство преобразования CSS3. Свойство перехода может определять продолжительность завершения эффекта наклона.
Чем меньше значение, тем медленнее оно будет, где следующий код CSS делает то же самое. В зависимости от ваших требований вы можете изменить значение степени, чтобы управлять воздействием наклона.
Вы можете увидеть приведенный выше код в действии здесь.
Подчеркивание подчеркивания
Если к элементу тега привязки не применен CSS, появится подчеркивание. Вы можете манипулировать этим поведением по умолчанию и сделать его более привлекательным, применяя эффект постепенного появления подчеркивания. Следующий код CSS изначально скрывает подчеркивание, устанавливая «none» для свойства «text-ornament». Он также использует селектор ::after для создания подчеркивания ниже текста привязки, а затем при наведении курсора эффект меняет свою непрозрачность до 1, чтобы отобразить его на экране.
Вы можете увидеть приведенный выше код в действии здесь. Если вы хотите, чтобы подчеркивание отображалось поверх текста привязки, вам нужно изменить селектор :: after на селектор ::before. Удалите CSS-классы селектора ::after и используйте следующие CSS-классы, чтобы вместо этого поместить строку поверх текста привязки.
Вы можете увидеть приведенный выше код в действии здесь.
Чтобы отобразить верх и низ одновременно при наведении, используйте следующий блок кода CSS. Этот код использует селекторы ::after и ::before для создания линии сверху и снизу текста привязки.
Эта статья предоставляет различные решения CSS3 для анимации или изменения дизайна пользовательского интерфейса элемента тега привязки при событии наведения мыши. Используя эти решения, вы можете легко изменять цвета, увеличивать размер шрифта, переворачивать текст, создавать границы вокруг текста.
Где нужно помещать прямоугольники или квадратные скобки вокруг якоря, наклонять текст и манипулировать подчеркиванием. Эти решения говорят сами за себя и легко понятны с небольшим знанием CSS3. Эти решения также могут быть использованы в качестве справочного материала или руководства для создания новых поведении при наведении курсора.
В этом материале вы узнаете, как можно задействовать экспериментальные функции, при помощи которых можно создать действительно оригинальные эффекты при навидение на ключевое слово или ссылку на сайте. Идея состоит в том, чтобы использовать псевдо-элементы и анимацию при наведении.
Используя эффекты наведения изображения CSS, вы можете добиться прекрасных результатов на любом сайте без особых усилий. Эффекты при наведении курсора, вероятно, являются наиболее часто используемыми элементами в веб-дизайне, главным образом из-за простоты их реализации в сочетании со значительно улучшенным пользовательским интерфейсом.
Сложные, не CSS-анимации могут перетащить сайт вниз, если вы не будете осторожны, и именно поэтому эффекты при наведении изображения CSS предпочтительны почти во всех случаях. Они не только быстро применяются к вашему сайту, но также быстро загружаются и добавляют минимальные накладные расходы на ваши страницы.
